Question

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?

Answer 1

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;