I know that I can fade in and out with jquery, but on mobile it will be jittery and like low fps or something. After a lot of searching I've found out I can use css3 transition to go to opacitiy 0, but the problem is the element will still have the place to itself. even with visibility:none, it will keep the space it was in. the only way is to use display:none but as I know I can't animate that. So is there a way to achieve smooth fade in and out animation on mobile with a bination of jquery and css3? or even just one? Thank you.

**EDIT**: Okay the answer for fadeout is working pretty well, now a fade in would be sweet. the problem is I think I have to pul a millisecond delay after ('#id').css('display','block') and before ('#id').css('opactity','1'). don't if it is efficient and all. but it works that way but all my other animations wouldn't work. still am really confused.

I know that I can fade in and out with jquery, but on mobile it will be jittery and like low fps or something. After a lot of searching I've found out I can use css3 transition to go to opacitiy 0, but the problem is the element will still have the place to itself. even with visibility:none, it will keep the space it was in. the only way is to use display:none but as I know I can't animate that. So is there a way to achieve smooth fade in and out animation on mobile with a bination of jquery and css3? or even just one? Thank you.

**EDIT**: Okay the answer for fadeout is working pretty well, now a fade in would be sweet. the problem is I think I have to pul a millisecond delay after ('#id').css('display','block') and before ('#id').css('opactity','1'). don't if it is efficient and all. but it works that way but all my other animations wouldn't work. still am really confused.

• javascript
• jquery
• html
• css

• you can't animate display property, but for example you can animate height property – abidibo Commented Dec 23, 2015 at 11:17
• JQuery animations shouldn't be jittery on mobile (AFAIK). You probably have a slow mobile device. – Jonathan Lam Commented Dec 23, 2015 at 11:17
• You could add two classes - one which has a transition time of say 1s which changes opacity to 0, then the other class which has a transition-delay of 1s which moves the element off canvas e.g. left: -9999px – StudioTime Commented Dec 23, 2015 at 11:21
• @JonathanLam Well I'm testing on iPhone 6 plus. I think it should be able to handle it. and btw the css3 animations are working fine but jquery fadeIn() is not. – Arman Momeni Commented Dec 23, 2015 at 11:22
• @DarrenSweeney well I think that will work. – Arman Momeni Commented Dec 23, 2015 at 11:24

4 Answers 4

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

If you animate an element in jQuery, for example, using fadeOut, you'll see what happens. It basically sets the opacity to 1, and then brings that value down to 0 in tiny increments. This is very inefficient. So it's better to always use CSS3 transitions and animations wherever possible.

Fade out: https://jsfiddle/danhaswings/znLL0ws5/1/

Fade in: https://jsfiddle/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');
});

What sort of phone are you testing on to get such slow / jittery animations? Mine seems to work fine for all of the animations that are supported on mobile browsers.

In any case, you can always try to use css keyframes.

Annoyingly, you cannot animate certain attributes (such as display) but it does allow for quite a lot of 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>

• Keyframes on MDN

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

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

$element.fadeIn();

function show() {
  $("#el").fadeIn();
}

#el {
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="show()">Show</button>
<div id="el">Hello</div>

Have a look at this article

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

You should be able to achieve a fade transition bining the opacity and transform properties