jQuery — Stop

stop()

$("div").stop();  // Stop current animation

stop(true)

$("div").stop(true);  // Stop and clear queue

stop(true, true)

$("div").stop(true, true);  // Stop, clear queue, jump to end

Practical: Hover Animations

$(".hover-box").hover(
    function() {
        $(this).stop().animate({ width: "200px" }, 300);
    },
    function() {
        $(this).stop().animate({ width: "100px" }, 300);
    }
);

finish()

$("div").finish();  // Stop and jump to end of ALL queued animations

Animation Queue Behavior

Without stop(), animations queue up:

// BAD: Multiple clicks cause stacking
$("div").click(function() {
    $(this).animate({ left: "+=100px" }, 500);
});

// GOOD: stop() clears the queue
$("div").click(function() {
    $(this).stop().animate({ left: "+=100px" }, 500);
});

stop() Parameters

Parameter	Default	Description
clearQueue	false	Clear remaining animations
jumpToEnd	false	Jump to current animation end

Mini Practice

1. Stop a hover animation on mouse leave
2. Use stop(true) to clear the queue
3. Use finish() to jump to end
4. Test animation stacking without stop()

Up Next

Continue with Callback — executing code after animations complete.