jQuery -

Stop

What is jQuery Stop?

The jQuery .stop() method is used to stop the currently running animations on the selected elements. It can be particularly useful when you want to prevent animations from queuing up and creating performance issues or unexpected behavior. This tutorial covers the different aspects of using the .stop() method with detailed explanations, examples, and useful tips.

1. Basic Stop

You can use the .stop() method to stop the currently running animation on an element.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .stop() Method - Basic</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#startButton").click(function(){
                $("div").animate({left: "250px"});
            });
            $("#stopButton").click(function(){
                $("div").stop();
            });
        });
    </script>
    <style>
        div {position: relative; background-color: yellow; width: 100px; height: 100px;}
    </style>
</head>
<body>
    <button id="startButton">Start Animation</button>
    <button id="stopButton">Stop Animation</button>
    <div>This is a div element.</div>
</body>
</html>

This example demonstrates how to stop an animation on a div when a button is clicked using the .stop() method.

2. Stop with ClearQueue

You can use the .stop(clearQueue, jumpToEnd) method with the clearQueue parameter set to true to clear the remaining animations in the queue.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .stop() Method - Clear Queue</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#startButton").click(function(){
                $("div").animate({left: "250px"}).animate({top: "100px"});
            });
            $("#stopButton").click(function(){
                $("div").stop(true);
            });
        });
    </script>
    <style>
        div {position: relative; background-color: yellow; width: 100px; height: 100px;}
    </style>
</head>
<body>
    <button id="startButton">Start Animation</button>
    <button id="stopButton">Stop Animation and Clear Queue</button>
    <div>This is a div element.</div>
</body>
</html>

This example shows how to stop the animation and clear the remaining animations in the queue.

3. Stop with Jump to End

You can use the .stop(clearQueue, jumpToEnd) method with the jumpToEnd parameter set to true to complete the current animation immediately.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .stop() Method - Jump to End</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#startButton").click(function(){
                $("div").animate({left: "250px"});
            });
            $("#stopButton").click(function(){
                $("div").stop(false, true);
            });
        });
    </script>
    <style>
        div {position: relative; background-color: yellow; width: 100px; height: 100px;}
    </style>
</head>
<body>
    <button id="startButton">Start Animation</button>
    <button id="stopButton">Stop Animation and Jump to End</button>
    <div>This is a div element.</div>
</body>
</html>

This example demonstrates how to stop the animation and jump to the end state immediately.

4. Stop Multiple Animations

You can stop multiple animations on different elements at the same time using the .stop() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .stop() Method - Multiple Animations</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#startButton").click(function(){
                $("div").animate({left: "250px"});
                $("p").animate({fontSize: "30px"});
            });
            $("#stopButton").click(function(){
                $("div, p").stop();
            });
        });
    </script>
    <style>
        div {position: relative; background-color: yellow; width: 100px; height: 100px;}
        p {font-size: 14px;}
    </style>
</head>
<body>
    <button id="startButton">Start Animations</button>
    <button id="stopButton">Stop Animations</button>
    <div>This is a div element.</div>
    <p>This is a paragraph.</p>
</body>
</html>

This example shows how to stop animations on multiple div elements at the same time.

5. Stop with Custom Queues

You can use the .stop() method with custom animation queues to control specific animations.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .stop() Method - Custom Queues</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#startButton").click(function(){
                var div = $("div");
                div.animate({left: "250px"}, {queue: "custom"});
                div.animate({top: "100px"}, {queue: "custom"});
                div.dequeue("custom");
            });
            $("#stopButton").click(function(){
                $("div").stop("custom");
            });
        });
    </script>
    <style>
        div {position: relative; background-color: yellow; width: 100px; height: 100px;}
    </style>
</head>
<body>
    <button id="startButton">Start Custom Queue Animation</button>
    <button id="stopButton">Stop Custom Queue Animation</button>
    <div>This is a div element.</div>
</body>
</html>

This example demonstrates how to stop animations in a custom queue.

6. Stop with Fade

You can combine the .stop() method with fading methods like .fadeIn() and .fadeOut().

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .stop() Method - Fade</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#startButton").click(function(){
                $("div").fadeIn().fadeOut();
            });
            $("#stopButton").click(function(){
                $("div").stop();
            });
        });
    </script>
    <style>
        div {display: none; background-color: yellow; width: 100px; height: 100px;}
    </style>
</head>
<body>
    <button id="startButton">Start Fade Animation</button>
    <button id="stopButton">Stop Fade Animation</button>
    <div>This is a div element.</div>
</body>
</html>

This example shows how to stop a fading animation using the .stop() method.

7. Stop with Slide

You can combine the .stop() method with sliding methods like .slideUp() and .slideDown().

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .stop() Method - Slide</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#startButton").click(function(){
                $("div").slideDown().slideUp();
            });
            $("#stopButton").click(function(){
                $("div").stop();
            });
        });
    </script>
    <style>
        div {display: none; background-color: yellow; width: 100px; height: 100px;}
    </style>
</head>
<body>
    <button id="startButton">Start Slide Animation</button>
    <button id="stopButton">Stop Slide Animation</button>
    <div>This is a div element.</div>
</body>
</html>

This example demonstrates how to stop a sliding animation using the .stop() method.

8. Stop with Custom Animation

You can use the .stop() method with custom animations created using the .animate() method.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .stop() Method - Custom Animation</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#startButton").click(function(){
                $("div").animate({left: "250px", opacity: 0.5, height: "toggle"});
            });
            $("#stopButton").click(function(){
                $("div").stop();
            });
        });
    </script>
    <style>
        div {position: relative; background-color: yellow; width: 100px; height: 100px;}
    </style>
</head>
<body>
    <button id="startButton">Start Custom Animation</button>
    <button id="stopButton">Stop Custom Animation</button>
    <div>This is a div element.</div>
</body>
</html>

This example shows how to stop a custom animation using the .stop() method.

9. Stop with Toggle

You can use the .stop() method with toggle animations to stop the toggle effect in progress.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .stop() Method - Toggle</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton").click(function(){
                $("div").animate({width: "toggle"});
            });
            $("#stopButton").click(function(){
                $("div").stop();
            });
        });
    </script>
    <style>
        div {background-color: yellow; width: 100px; padding: 10px;}
    </style>
</head>
<body>
    <button id="toggleButton">Toggle Width</button>
    <button id="stopButton">Stop Toggle Animation</button>
    <div>This is a div element.</div>
</body>
</html>

This example demonstrates how to stop a toggle animation using the .stop() method.

10. Stop with Delay

You can use the .stop() method in combination with the .delay() method to stop delayed animations.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .stop() Method - Delay</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#startButton").click(function(){
                $("div").delay(2000).animate({left: "250px"});
            });
            $("#stopButton").click(function(){
                $("div").stop();
            });
        });
    </script>
    <style>
        div {position: relative; background-color: yellow; width: 100px; height: 100px;}
    </style>
</head>
<body>
    <button id="startButton">Start Delayed Animation</button>
    <button id="stopButton">Stop Delayed Animation</button>
    <div>This is a div element.</div>
</body>
</html>

This example shows how to stop an animation that has been delayed using the .stop() method.