Question

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

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

Answer 1

我认为你真正想要的是.bind（）方法：

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

Answer 2

您可以使用one()

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

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很棒:)）

Answer 4

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

例如，假设你想要#DyDiv对象的slideDown（），一旦完成，改变#icon的不透明度：

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

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

我没有测试过，但它应该有用......

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

4 个答案: