Geek Answers Handbook

How to achieve * SMOOTH * fade animation on a mobile phone with jQuery and css3?

I know that I can fade in and out with jquery, but on a mobile phone it will be nervous and like low fps or something like that. After many searches that I discovered, I can use the css3 transition to go to opacitiy 0, but the problem is that the element will still have room for itself. even with visibility: no, he will keep the space in which he was. The only way to use the display: no, but, as I know, I can’t revive it. So, is there a way to achieve smooth animation in the animation on a mobile phone with a combination of jquery and css3? or even one? Thanks.

**EDIT** : It’s good that the answer for fadeout works very well, now the extinction will be enjoyable. the problem is that I think I need to skip the millisecond delay after ('#id').css('display','block') and before ('#id').css('opactity','1') not if it is effective and all. but it works like that, but all my other animations won't work. still really confused.

+6
source share
4 answers

You should always try using CSS3 transitions instead of jQuery animations. Here I use the CSS3 transition to fade out the .square , and then I wait until the transition completes to set the display to none .

If you animate an element in jQuery, for example using fadeOut , you will see what happens. It basically sets the opacity to 1, and then adjusts this value to zero with minimal increments. It is very inefficient. Therefore, it is best to always use CSS3 transitions and animations where possible.

Attenuation: https://jsfiddle.net/danhaswings/znLL0ws5/1/

Attenuation: https://jsfiddle.net/danhaswings/kjgmxa8x/

HTML

 <div class="square"></div>

CSS

 .square { width: 100px; height: 100px; background-color: red; transition: opacity 1s ease-in-out; }

JQuery

 var $square = $('.square'); $square.css('opacity', '0'); $square.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() { $(this).css('display', 'none'); });
+6
source

What phone are you testing to get such a slow / erratic animation? Mine seems to work just fine for all animations supported in mobile browsers.

In any case, you can always try using css keyframes.

Annoyingly, you cannot animate certain attributes (such as display ), but this allows for quite a few things, including opacity, as shown below.

 div { width: 100px; height: 100px; background: red; margin: 20px; } .to_hide { -webkit-animation: hide 5s forwards; animation: hide 2s forwards; } @-webkit-keyframes hide { from { opacity: 1; } 40% { opacity: 0; } 100% { position: absolute; opacity: 0; } } 
 <div class="to_hide"></div> <div></div>

Ultimately, on mobile phones, you should try to avoid using animations, as mobile browsers are not optimized for such things. Your site should gracefully degrade both in size, layout, and content, as well as animation.

+3
source

Should go smoothly if you use jQuery fadeIn() , which will fade in the element with display: none

 $element.fadeIn(); 

 function show() { $("#el").fadeIn(); } 
 #el { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="show()">Show</button> <div id="el">Hello</div>
-1
source

Check out this article

You should always avoid animating properties that will trigger layout or paints, both of which are expensive and can lead to skipping frames.

You should be able to make the transition to gradual fading by combining the opacity and transformation properties.

-1
source

More articles:


All Articles