jQuery调用CSS3淡入淡出动画？答案

【问题标题】：jQuery to call CSS3 fade animation?jQuery调用CSS3淡入淡出动画？
【发布时间】：2012-02-10 03:36:37
【问题描述】：

我在我的网站（为 iOS 开发）上使用的动画使用 jQ 进行了简单的淡入和淡出：

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

但是，iPhone 在运行这些动画时会不稳定。然而，CSS3 动画效果更流畅。如何使用 jQuery 淡出 div 但使用 CSS3 动画而不是 jQ 动画？

【问题讨论】：

标签： jquery css

【解决方案1】：

这更容易，但是一旦淡出它就不会“消失”，因此一旦过渡完成，页面就不会重排。相当于jQuery的fadeTo()，而不是fadeOut()；

淡出

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

淡入

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

使用超时延迟执行

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

使用 .delay 延迟执行

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

但这可能最好通过 CSS 中的转换延迟属性来完成：

  -vendor-transition-delay: 2s;

或者简写：

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

【讨论】：

是否可以延迟它，例如$('.loading').delay(500).css({？
你必须像 Zontan 的例子一样使用队列，但我更喜欢使用直接的 js 超时，即setTimeout(function(){$('selector').css()}, 500)
队列是这样工作的吗，$('.loading').css.queue(function(){? 另外，为什么你更喜欢使用基本的js超时？
我不喜欢过度使用链接。我用更多示例更新了答案。
您应该从这里开始，将fadeOut 附加到Ajax 回调，而不是假装延迟动态加载。这是一个更简单的实现jsfiddle.net/E2Srk

【解决方案2】：

使用 CSS 动画创建一个类并在需要时附加它 -

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

【讨论】：

这不是最好的方法。虽然它确实淡出 div，但在转换完成后，div 后面的任何内容都不可点击（或可点击）：jsfiddle.net/charlescarver/SXFnt
@Charlie - 好点，更新后动画会隐藏元素
我明白为什么会这样，但似乎jsfiddle.net/charlescarver/SXFnt/1
效果很好。淡出已经完成之后的淡入呢？似乎是这样，因为它在第一次加载后不显示，然后我尝试使其淡入（使用opacity:1 代替.fadein 而不是.fadeout），它没有。我认为这是因为它需要显示块然后淡入？
z-index 可能是点击问题