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

Question

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

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

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

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

score 1 · Accepted Answer

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

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

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

以上将返回匹配的元素$('.container')，因为findend

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

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

score 1 · Accepted Answer

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

即如果我这样做：

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

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

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

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

要解决您的实际问题（即在动画完成后更改样式），您需要将该更改放在其自身的complete回调函数参数中.animate()。

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

2 回答 2