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();

Fades

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

Fade in

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

及时执行

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"
      })
    });

但是,这或许最好通过转变,推迟你的财产:

  -vendor-transition-delay: 2s;

或简略:

  -vendor-transition: opacity 200ms ease 2s;

Answer 2

a) 在需要时,与社会保障局一起制作一个课堂,并附上该课;

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

友情链接