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

【问题标题】：How to remove an attribute after animation in jquery如何在jquery中删除动画后的属性
【发布时间】：2015-10-08 03:22:11
【问题描述】：

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

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

它不起作用，因为它甚至在开始动画之前就删除了 id，但我想做的是从图像中删除 id #deer 并在 .animate() 执行后添加 ('open') .

所以我在这里做了一个 jsfiddle：http://jsfiddle.net/67oe1jvn/45/。当您在 HELLO h1 下向下滚动时，请注意左图。我想要实现的是：当我到达第二部分时，我希望看到两个图像都在视图中滑动，指令“transition:all 1.2s ease-out;”并且每当该部分发生更改时，都会使它们以更快的过渡速度滑出视图，因此不会引起太多注意。

【问题讨论】：

标签： javascript jquery css animation css-transitions

【解决方案1】：

请试试这个

$.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()

【讨论】：

感谢您提供快速而完整的答案。看起来它无论如何都不起作用：/#deer 的动画不起作用，但类被添加了。
你能添加html css和js或者创建一个fiddle吗？你都试过了吗？
我会尝试创建一个小提琴，否则我会在免费主机上上传网站。可能会更容易。
我添加了小提琴演示。请通过那个
稍后再做，因为我五分钟后出去。 thx 的答案，将在一个小时内更新所有内容。

【解决方案2】：

您需要提供动画完成后触发的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/

【讨论】：