How does end() work for animate()?

Question

I'm currently looking into chaining my jquery code. An element needs to ditch a border, animated. My solution: animate the borderWidth to zero and then remove the class:

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

animate() is supposed to return the wrapped element, but what I understand from the jQuery API, end() will return the object to its state before the call to .find.

.find is in the context of the example so I took the liberty to replace it with .animate. Alas, this does not work for me. The result of .end() is the result of .animate().

Answer 1

Because you (now) have no find filter (or any other filter), end has nothing to undo. It has nothing to do with animate.

If you were to first select a container, then look within it for imgWrap, you could undo the filter:

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

The above will return the elements matching $('.container'), as the find is undone by end

What may be confusing things is that if you chain removeClass immediately after animate, removeClass will not wait for animate to finish so it will appear that there is no animation happening. You need to remove the class in the complete function of animate:

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