Home > Article > Web Front-end > How to cancel the delay method in jquery
How to cancel the delay method in jquery
- WBOYOriginal
- 2022-06-01 18:24:152251browse
In jquery, you can use the stop() method to cancel the delay time set by the delay() method. The stop() method is used to stop the currently ongoing animation for the selected element, and can also end the delay time. The syntax is "element object set by delay method.stop();".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
How to cancel the delay method in jquery
The stop() method stops the currently running animation for the selected element.
Syntax
$(selector).stop(stopAll,goToEnd)
Parameter Description
stopAll Optional. A Boolean value that specifies whether to stop all queued animations of the selected element. The default is false.
goToEnd Optional. A Boolean value that specifies whether to complete the current animation immediately. The default is false.
The delay() method sets a delay for the execution of the next item in the queue.
Grammar
$(selector).delay(speed,queueName)
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
$("#div3").delay(800).fadeIn();
$("#div4").delay(2000).fadeIn();
$("#div5").delay(4000).fadeIn();
});
$("#stop").click(function(){
$("div").stop();
});
});
</script>
</head>
<body>
<p>这个实例使用 delay() 方法来设置不同的速度值。 </p>
<button>点击按钮，显示多个的 div 框。</button><button id="stop">停止延迟</button>
<br><br>
<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>
<div id="div2" style="width:90px;height:90px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:90px;height:90px;display:none;background-color:blue;"></div><br>
<div id="div4" style="width:90px;height:90px;display:none;background-color:red;"></div><br>
<div id="div5" style="width:90px;height:90px;display:none;background-color:purple;"></div><br>
</body>
</html>Output result:
Related video tutorial recommendations: jQuery video tutorial
The above is the detailed content of How to cancel the delay method in jquery. For more information, please follow other related articles on the PHP Chinese website!