jQuery to call CSS3 fade animation?

G

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?

Glycerin answered 14/1, 2012 at 0:9 Comment(0)

T

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;

Trapper answered 14/1, 2012 at 1:22 Comment(7)

Is it possible to put a delay on it, ex $('.loading').delay(500).css({? – Glycerin 14/1, 2012 at 1: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) – Trapper 14/1, 2012 at 1:38

Does the queue work like this, $('.loading').css.queue(function(){? Also, why do you prefer using basic js timeouts? – Glycerin 14/1, 2012 at 3:31

I don't like going overboard with the chaining. I updated the answer with more examples. – Trapper 14/1, 2012 at 8:0

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 – Glycerin 14/1, 2012 at 19:35

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 jsfiddle.net/E2Srk – Trapper 14/1, 2012 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. chat.stackoverflow.com/rooms/6726/… – Glycerin 15/1, 2012 at 0:32

C

6

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

$(".loading").addClass("fadeout").delay(2000).queue(function() {
    $(this).css('display', 'none');
});

Cassatt answered 14/1, 2012 at 0:12 Comment(5)

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: jsfiddle.net/charlescarver/SXFnt – Glycerin 14/1, 2012 at 0:24

@Glycerin - good point, updated that after the animation it will hide the element – Cassatt 14/1, 2012 at 0:32

I understand why that would work, but it doesn't seem to jsfiddle.net/charlescarver/SXFnt/1 – Glycerin 14/1, 2012 at 0: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? – Glycerin 14/1, 2012 at 1:7

z-index is probably the clicking issue – Thaler 14/1, 2013 at 2:1

T

5