Topics

jQuery Stop

The jQuery stop() method is commonly employed when you want to stop the jQuery animations or effects that are currently running on the selected elements before their completion.

The syntax of the ‘jQuery stop()’ :

$(selector).stop(stopAll, goToEnd);

Meaning of the jQuery stop()

The meaning of the jQuery stop() method syntax parameters are highlighted below:

stopAll: This is an optional Boolean parameter that specifies whether to remove queued animation or not. However, the default value is false, which means that only the current animation will be stopped, while the rest of the animations in the queue will run afterward.
goToEnd: This is an optional Boolean parameter that specifies whether to complete the current animation immediately, and the default value is false.

Below is an example that shows the jQuery stop() method in real action in which you can start and stop the animation with just a click of the button.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Stop Currently Running Animations</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    img{
        position: relative; /* Required to move element */
    }
</style>
<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });

    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });

    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>
</head>
<body>
    <button type="button" class="start-btn">Start</button>
    <button type="button" class="stop-btn">Stop</button>
    <button type="button" class="back-btn">Back</button>
    <button type="button" class="reset-btn">Reset</button>
    <p>
    	<img src="/assets/example/images/tutorialwithexample-logo.png" alt="Tutorialwithexample-logo">
    </p>
</body>
</html>

Try with example

Also, take a look at this other example of this method in which, when you click the "Slide Toggle" button again after starting the animation, but before it is completed, the animation will begin in the opposite direction immediately from the saved starting point.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Stop Current Animation and Play Next Animation in Queue</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    .box{
        width: 300px;
        height: 200px;
        background: #9d7ede;
        margin-top: 20px;
        border: 3px solid #6f40ce;
    }
</style>
<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>
</head>
<body>
	<p><strong>Note:</strong> Click the "Slide Toggle" button to start the animation, then click again before the animation is completed to understand this example.</p>
    <button type="button" class="toggle-btn">Slide Toggle</button>
    <div class="box"></div>
</body>
</html>

Try with example

Creating Smooth Hover Effect

During the creation of the animated hover effect, one of the common problems you may face is multiple queued animations and is when you place and remove the mouse cursor rapidly. This is because in a situation like this mouseenter or mouseleave events are triggered quickly before the animation completes. However, to avoid this problem and create a nice and smooth hover effect you can add the stop(true, true) to the method chain, as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Smooth Hover Effect</title>
<style>
    .box{
        width: 500px;
        height: 300px;
        border: 5px solid #000;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>
</head>
<body>
    <div class="box">
    	<img src="/examples/images/sky.jpg" alt="Cloudy Sky">
    </div>
    <p><strong>Note:</strong> Place and remove the mouse pointer over the image to see the effect.</p>
</body>
</html>

Try with example