Home > Developer > Web Develop
The JQuery Stop () method is used to stop animations or effects before they are finished.
The Stop () method applies to all JQuery effect functions, including sliding, fading, and custom animations.
Grammar:
$( selector). Stop ( Stopall,gotoend);The optional StopAll parameter specifies whether the animation queue should be cleared. The default is false, which stops only active animations, allowing any queued animation to be executed backwards.
The optional gotoend parameter specifies whether to complete the current animation immediately. The default is False.
Therefore, by default, stop () clears the current animation specified on the selected element.
which
Stop (): Indicates that the animation that is currently in progress is stopped, but not after it has been performed
Stop (TRUE): Indicates that all animations are stopped, including those that are in progress and that have not yet been performed
Stop (True,true): Indicates that all animations are stopped, but the animation that is currently in progress is completed immediately
Examples are as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Scriptsrc= "Http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></Script><Script>$ (document). Ready (function(){ $("#start"). Click (function(){ $("Div"). Animate ({left:'100px'}, the); $("Div"). Animate ({fontSize:'3em'}, the); }); $("#stop"). Click (function(){ $("Div"). Stop (); }); $("#stop2"). Click (function(){ $("Div"). Stop (true); }); $("#stop3"). Click (function(){ $("Div"). Stop (true,true); }); });</Script> </Head><Body><ButtonID= "Start">Begin</Button><ButtonID= "Stop">Stop it</Button><ButtonID= "Stop2">Stop all</Button><ButtonID= "STOP3">Stop the animation, but complete the action</Button><P>Click the Start button to start the animation.</P><P>Click the Stop button to stop the currently active animation, but then we can activate it again in the animation queue.</P><P>Click the Stop All button to stop the current animation and clear the animation queue, so all animations of the element will stop.</P><P>Click "Stop animation, but complete the action" to complete the action quickly and stop it.</P> <Divstyle= "background: #98bf21; height:100px;width:200px;position:absolute;">HELLO</Div></Body></HTML>View Code
Stop animation notes in jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
