Jquery - 在CSS动画结束后应用样式

Question

我该如何使用jQuery确定元素的CSS动画何时结束，然后为该元素应用新样式？以下是我不可用的代码示例。

$("#icon").jQuery.Event("webkitAnimationEnd", function(event){
    ('#icon').css('opacity', '1');
}); 

- Tim

---

你是想要全局应用它，而不必为每个动画分配它吗？ - Fosco

我实际上需要将它分配给单独的动画:/ - Tim

Answer 1

我认为你实际上正在寻找的是.bind()方法：

$("#icon").addClass('thisClassWillApplyMyCSSAnimation').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    //DO WHATEV
    $('#icon').css('opacity', '1');
}); 

- Adam Coulombe

Answer 2

您可以使用one()函数。

$("#icon").one('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) {
    //Your css
    $('#icon').css('opacity', '1');
}); 

- Ouadie

Answer 3

如果我理解你的意思，你想要动画化一个CSS属性并定义一个回调函数在动画结束时执行。你应该使用.animate()函数。

例如：

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
  }, 5000, function() {
    // Animation complete.
  });
});

以下脚本将使不透明度从当前值动画到0.25，这将花费5000毫秒。最后一个函数将在动画完成后被调用。

这是JQuery页面的链接：http://api.jquery.com/animate/ JQuery太棒了 :)

- Arnaud

---

谢谢，但事实是我已经用CSS3处理过动画了，我只是想让jQuery知道什么时候完成。这看起来可能有些多余，但我真的需要使用CSS来完成动画 :) - Tim

嗨，Tim，只需使用jQuery的animate方法而不是CSS动画，这样它就跨浏览器兼容，并且您可以使用上面的回调方法。 - addedlovely

除了jQuery在移动设备上非常慢之外，我同意发帖者的观点，我们需要知道如何在Webkit动画完成后添加样式到某些元素。 - Alex

这种技术比使用CSS慢了数个数量级。 - Matt Briggs

Answer 4

大多数（如果不是全部）动画都定义了一个回调函数，用于在活动完成后执行。

例如，假设您想将#MyDiv对象向下滑动()，一旦完成，就更改#icon的不透明度：

$("#MyDiv").slideDown("[speed]", function()
{
  $("#icon").css("opacity", "1");
});

// [speed] = "slow", "normal", "fast" or a integer value defining milliseconds

我没有测试过，但应该可以工作...

- Chris Tifer

---

保持话题并回答他的问题。这完全是错误的，因为您没有涉及jQuery如何处理Webkit动画事件的主题。 - Alex