Stops all animations that are running on the specified element if there are animations waiting to be executed in the queue (and Clearqueue is not set to true), they will be executed immediately
Instance:
<! DOCTYPE html>;} Html{font:13px/1.2em ' Courier New '; color: #000;} . animation{width:100px;height:100px;background:red;border-radius:2px;text-align:center;line-height:100px;color: #FFF;} Button{background: #FF9E6B;p adding:8px 16px;border:0;outline:none;-webkit-outline:none;margin-bottom:15px;font:400 13px/1.2em ' Courier New '; color: #FFF; Border-radius : 2px;} </style><script type= ' Text/javascript ' > $(function(){ $('. Start '). Click (function(){ $('. Animation '). Animate ({' width ': ' 100px ', ' height ': ' 100px ',},0, ' linear ')); $('. Animation '). Animate ({' width ': ' 150px ',},1500, ' linear ')); $('. Animation '). Animate ({' Height ': ' 150px ',},1500, ' linear ')); $('. Animation '). Animate ({' width ': ' 450px ', ' height ': ' 300px ',},1500, ' linear ')); }); $('. Stop '). Click (function(){ /*stop: This method passes two parameters, the default value is False, and the parameters are resolved as follows: The first parameter: 1.false means stop the currently executing Animation but the animation sequence is not cleared, 2.true clearly changes all animation sequences on a node the second parameter: 1.false means stop animation immediately at stop 2.true indicates that the current property is set directly to the final target of the current animation when the animation is stopped, for example: Click the Stop button when performing the second animation, the width of '. Animation ' is directly set to 150px; */ $('. Animation '). Stop (true,true); }); });</script>
[jquery effect Stop (stopall,gotoend)] This method is used to stop all animations that are running on the specified element if there are animations waiting to be executed in the queue (and Clearqueue is not set to true), they will be executed immediately