end() 如何为 animate() 工作？

Posted 2023-05-09

【中文标题】end() 如何为 animate() 工作？

【英文标题】：How does end() work for animate()?

【发布时间】：2011-08-13 17:06:39

【问题描述】：

我目前正在研究链接我的 jquery 代码。一个元素需要放弃一个边界，动画。我的解决方案：将borderWidth设置为零，然后删除该类：

$(".imgWrap", element).animate( borderWidth: "0px" ).end()
    .removeClass("border");

animate() 应该返回被包装的元素，但我从 jQuery API 中了解到，end() 会将对象返回到调用 .find 之前的状态。

.find 在示例的上下文中，所以我冒昧地将其替换为.animate。唉，这对我不起作用。 .end() 的结果是.animate() 的结果。

【参考方案1】：

因为您（现在）没有find 过滤器（或任何其他过滤器），所以end 没有什么可撤消的。与animate无关。

如果您要先选择一个容器，然后在其中查找imgWrap，您可以撤消过滤器：

$('.container').find('.imgWrap').animate(borderWidth: '0px').end();

上面将返回匹配$('.container')的元素，因为find被end撤消

可能令人困惑的是，如果您在animate 之后立即链接removeClass，removeClass 将不会等待animate 完成，因此看起来没有动画发生。需要去掉animate的complete函数中的类：

$(".imgWrap", element).animate( borderWidth: "0px" , function()
    $(this).removeClass('border');
);

【参考方案2】：

.end()将jQuery对象返回到.find()之前的状态

即如果我这样做：

$('div').find('.class').end()

那么链接后剩下的就是$('div') 的结果。它不会改变元素本身的任何内容。

大多数 jQuery 方法返回的 jQuery 对象不仅包含当前匹配的元素，还包含以前链式调用的结果堆栈。

因此，当您调用 .find() 时，前一个列表仍存储在该堆栈中。调用.end() 只是从堆栈中删除最后一项。

要解决您的实际问题（即在动画完成后更改样式），您需要将该更改放入 complete callback function parameter 到 .animate() 本身。

$(".imgWrap", element)
   .animate( borderWidth: "0px" , function() 
       $(this).removeClass("border");
   );

【讨论】：

与亚当几乎相同的答案一起上另一个 jquery 课，谢谢！