Question

我想在动画完成后从图像中删除id。我的代码中有这个：

if(index == 1 && direction =='down'){
    $('#slidetext1 #rock').animate({right:"0"});
    $('#slidetext1 #deer').animate({left: "0"}).addClass('open').removeAttr('id');
}

它不起作用，因为它在开始动画之前删除了id，但我想要做的是从图像中删除id #deer并在{{1}之后添加（'open'）已被执行。

所以我在这里制作了一个jsfiddle：http://jsfiddle.net/67oe1jvn/45/。当您在HELLO h1下向下滚动时，请注意左侧图像。我想要达到的目的是：当我进入第二部分时，我希望看到两个图像在视图中滑动，指示“过渡：所有1.2s缓出;”并且每当部分被更改时，它们都会以更快的速度滑出视图，因此不会被注意到那么多。

Answer 1

您需要提供动画完成后触发的complete回调函数。您可以通过将代码更新为以下

来实现此目的

 if(index == 1 && direction =='down'){
      $('#slidetext1 #rock').animate({right:"0"});
      $('#slidetext1 #deer').animate({left: "0"}, function(){
             $(this).addClass('open').removeAttr('id')
      });
  }

供参考 - http://api.jquery.com/animate/

Answer 2

请尝试此

$.when($('#slidetext1 #deer').animate({left: "0"})).then(function(){
   $('#slidetext1 #deer').addClass('open').removeAttr('id')
});

如果将单个Deferred传递给jQuery.when()，则该方法将返回其Promise对象（Deferred方法的子集）。可以调用Promise对象的其他方法来附加回调，例如deferred.then。通过最初创建Deferred的代码解析或拒绝Deferred时，将调用相应的回调。

或

$('#slidetext1 #deer').animate({left: "0"}).promise().done(function(){ $('#slidetext1 #deer').addClass('open').removeAttr('id') });

.promise()方法返回一个动态生成的Promise，一旦绑定到已排队或未排队的集合的某个类型的所有操作都已结束，该Promise就会被解析。

DEMO with .promise()

DEMO with .when()

如何在jquery中删除动画后的属性

2 个答案: