2

The animations that I am using on my site (which is developed for iOS) has a simple fade in and fade out using jQ:

$('.loading').fadeOut();

The iPhone, however, is choppy while running these animations. CSS3 animations work much smoother however. How can I fade out the div using jQuery but using CSS3 animations instead of the jQ ones?

Charlie
  • 11,380
  • 19
  • 83
  • 138

2 Answers2

6

create a class with the CSS animation and attach it when needed - 

$(".loading").addClass("fadeout").delay(2000).queue(function() {
    $(this).css('display', 'none');
});
Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
  • This isn't the best way to do it though. While it does fade out the div, nothing is clickable (or tappable) behind the div after the transition is complete: http://jsfiddle.net/charlescarver/SXFnt/ – Charlie Jan 14 '12 at 00:24
  • @Charlie - good point, updated that after the animation it will hide the element – Zoltan Toth Jan 14 '12 at 00:32
  • I understand why that would work, but it doesn't seem to http://jsfiddle.net/charlescarver/SXFnt/1/ – Charlie Jan 14 '12 at 00:36
  • That works perfectly. What about a fadein after the fadeout's been already done? It seems like that since it makes it display none after the first loading, and then I try to make it fade in (using `opacity:1` for `.fadein` instead of `.fadeout`), it doesn't. I assume this is because it needs to be displayed block THEN faded in? – Charlie Jan 14 '12 at 01:07
  • z-index is probably the clicking issue –  Jan 14 '13 at 02:01
5

This is easier, but once faded out it doesn't "disappear", so the page doesn't reflow once the transition is complete. It's equivalent to jQuery's fadeTo(), not fadeOut();

Fade out

$('selector').css({
  "opacity": 0,
  "pointer-events": "none"
});

Fade in

$('selector').css({
  "opacity": 1,
  "pointer-events": "auto"
})

Delaying execution with Timeout

setTimeout(function(){
  $('selector').css({
    "opacity": 1,
    "pointer-events": "auto"
  })
},)

Delaying execution with .delay

  $('selector')
    .delay(2000)
    .queue(function() {
       $(this).css({
        "opacity": 1,
        "pointer-events": "auto"
      })
    });

But this is probably best done through the transition delay property in your css:

  -vendor-transition-delay: 2s;

Or in shorthand:

  -vendor-transition: opacity 200ms ease 2s;
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • Is it possible to put a delay on it, ex `$('.loading').delay(500).css({`? – Charlie Jan 14 '12 at 01:31
  • You must use the queue as in Zontan's example, but I prefer using straight js timeouts i.e. `setTimeout(function(){$('selector').css()}, 500)` – methodofaction Jan 14 '12 at 01:38
  • Does the queue work like this, `$('.loading').css.queue(function(){?` Also, why do you prefer using basic js timeouts? – Charlie Jan 14 '12 at 03:31
  • I don't like going overboard with the chaining. I updated the answer with more examples. – methodofaction Jan 14 '12 at 08:00
  • Thank you for the update. The use of this is to display a loading screen when the page loads AJAX content, and then every time the AJAX request is called again. I'm not sure why this is happening, but you can only reload the AJAX once for it to show the loading screen: jsfiddle.net/charlescarver/9q9vK – Charlie Jan 14 '12 at 19:35
  • 1
    You should have started from here, attach the fadeOut to the Ajax callback instead of faking the dynamic load with delay. Here is a much more simple implementation http://jsfiddle.net/E2Srk/ – methodofaction Jan 14 '12 at 20:34
  • I agree with that idea. I have a few more questions, if you could answer them in chat when you have time. http://chat.stackoverflow.com/rooms/6726/discussion-between-charlie-and-duopixel – Charlie Jan 15 '12 at 00:32