Instantly completing the animation queue in jQuery

Question

I need to stop the animation and instantly complete all pending animations.
stop doesn't work:
Lets say I have animation that moves element that is on 0px by 100px and I use stop when it moved only 50px. The result will be an element at 50px. The result I want is when I interrupt the animation, even if the element is at 50px it will instantly jump to 100px.
How do I do that?

Answer 1

$.fn.stop() has the option to clear the queue and to jump to the end.

Just do something like: $('#foo').stop(true, true);

Answer 2

found this at http://forum.jquery.com/topic/stop-true-true-animation-chains-and-callbacks

(function($){
    $.fn.extend({
        hardStop: function(){
            return this.each(function(){
                var e = $(this);
                while (e.queue().length){
                    e.stop(false, true);
                }
            });
        }
    });
})(jQuery);

use it by

$("#element").hardStop();

If that doesn't work, maybe change your original code to:

$("#abc").stop().animate(...

Answer 3

Specify manually the last state, don't be lazy. Im sure you can do it :)

$('#foo').stop(true, true);
$('#foo').css({x, '100px'});