AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery stop()


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

jQuery Tutorial » jQuery stop()

What is STOP () in jQuery?

The jQuery stop () method is used to stop animations or jQuery effects currently running on selected items before completion.

stop() method works for all jQuery effect functions as: sliding, fading, animations, etc.

Syntax:

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

stopAll: optional parameter, value of this parameter is boolean and parameter is used to specify whether or not to stop animations. Default value is false.
goToEnd: optional parameter and the value of this parameter is boolean and is used to specify whether or not to complete all animations immediately. Default value is false.

 

jQuery stop() Method

The following is a simple example that demonstrates the jQuery stop () method in real action where you can start and stop the animation when you click 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.5.1.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="https://www.agernic.com/images/train.jpg" alt="Mushroom">
</p>
</body>
</html>

 

Related subjects:
jQuery slideDown () jQuery slideUp () Effect animation jQuery slideToggle

 

Tags: jquery stop propagation, animation, function, each loop, interval,
execution, click event, event scrool, method, stopwatch
propagation, stop load page, stop css animation, function on click
What is STOP () in jQuery?
What parameters takes jQuery stop method?
How do you stop the currently running animation in jQuery?
How do you stop a function call in jQuery?

 

stop() method, with no parameters - Example

The following example demonstrates the stop() method, with no parameters:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
}

#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>

<button id="stop">Stop sliding</button>

<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

 

Smooth Hover Effect

jQuery method stop(true, true) clears all the queued animations and jumps the current animation to the final value.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Smooth Hover Effect</title>
<style>
.box{
width: 500px;
height: 300px;
border: 3px solid #000;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.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 style="width:500px; height:300px" src="https://www.agernic.com/uploads/espana-imagenes.jpg" alt="Spain nice images">
</div>
<p><strong>Note:</strong> Place and remove the mouse pointer over the image to see the effect.</p>
</body>
</html>

 



jquery stop propagation, animation, function, each loop, interval, execution, click event, event scrool, method, stopwatch
propagation, stop load page, stop css animation, function on click
What is STOP () in jQuery?
What parameters takes jQuery stop method?
How do you stop the currently running animation in jQuery?
How do you stop a function call in jQuery?
JQuery stop() - jquery

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...