Jquery - 在 CSS 动画结束时应用样式答案

【问题标题】：Jquery - Apply Style on CSS Animation EndJquery - 在 CSS 动画结束时应用样式
【发布时间】：2014-01-16 22:36:04
【问题描述】：

如何使用 jQuery 来确定元素的 CSS 动画何时结束，然后为该元素应用新样式？下面是我的非功能代码。

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

【问题讨论】：

您是否尝试在全局范围内应用此功能，而不必为单个动画分配它？
我实际上需要将它分配给单个动画：/

标签： jquery css animation

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以使用one()

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

【讨论】：

【解决方案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 很棒 :)

【讨论】：

谢谢，但问题是我已经用 CSS3 处理了动画，我只想让 jQuery 知道什么时候完成。这似乎没有必要，但我真的需要使用 CSS 来制作动画 :)
嗨蒂姆，只需要使用jquery animate方法而不是CSS动画，这样它的跨浏览器兼容，你可以使用上面的回调方法。
是的，除了 jQuery 在移动设备上的速度非常慢。我同意发布此内容的人的观点，我们需要知道如何在 webkit 动画完成后为某些内容添加样式...
这种技术比使用 css 慢几个数量级

【解决方案4】：

大多数（如果不是全部）动画定义了活动完成后的回调。

例如，假设您想要 slideDown() #MyDiv 对象，一旦完成，更改#icon 的不透明度：

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

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

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

【讨论】：

保持话题并回答他的问题。这是完全错误的，因为您没有解决 jquery 如何谈论 webkit 动画事件的主题。