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

Question

我目前正在寻找链接我的jquery代码。元素需要去掉边框，动画。我的解决方案:将borderWidth动画为零，然后删除类:

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

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

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

Answer 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');
});

Answer 2

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

。如果我这样做:

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

则链接后剩下的是$('div')的结果。它不会改变元素本身。

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

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

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

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