在jquery中的动画后删除一个id [关闭]答案

【问题标题】：remove an id after an animation in jquery [closed]在jquery中的动画后删除一个id [关闭]
【发布时间】：2015-07-18 19:32:06
【问题描述】：

我想在动画完成后从图像中删除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;”。并且每当该部分发生更改时，都会使它们以更快的过渡速度滑出视图，因此不会引起太多注意。

【问题讨论】：

问题是为什么要删除ID？更改一个类，但不要删除一个 ID 以获得某种效果
您需要更好地定义您想要实现的目标。
因为 id 是这样说的：transition:all 1.2s ease-out; -webkit-transition：所有 1.2s 缓出；而且我想让新班级在更改部分时更快地滑动……这是我能想到的唯一方法。
您问题中的代码与您的 MCVE 中的代码不匹配。
在jsfiddle中向下滚动到第二部分！你会看到 2 张图片以一定的速度滑动（有点慢）我只是希望它们在我滚动到另一个部分时更快地滑出。

标签： javascript jquery css animation fullpage.js

【解决方案1】：

首先，正如 cmets 中所指出的，您不想删除 DOM 元素的 id 属性，这是不好的做法。例如，添加和删除特定类。（如果您将#deer 更改为.deer，您的代码几乎可以正常工作）

至于在动画完成时执行此操作：参见jQuery docs on animate，在其第二个参数options 中，它实际上接受了一个回调以在动画结束时运行：

功能齐全： 如果提供，则在动画完成后触发完整的回调函数。这对于将不同的动画按顺序串在一起很有用。回调没有发送任何参数，但它被设置为动画的 DOM 元素。如果为多个元素设置动画，则每个匹配元素执行一次回调，而不是对整个动画执行一次。

这意味着您可以编写如下内容：

$('#slidetext1 .deer').animate({left: "0"}, {complete: function(){
    this.removeClass('deer');
}})

注意：这是否是构建动画的最佳方式值得怀疑，我只是在回答您最初的问题：动画完成后如何做某事。

【讨论】：