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

可能令人困惑的是，如果您在removeClass后立即链接animate，removeClass将不会等待animate完成，那么似乎没有动画正在发生。您需要在complete的{​​{1}}函数中删除该类：

animate

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