jquery中stop()的用法实例详解_动视

jquery中stop()的用法实例详解

2020-11-27 20:17:36 责编:小采

stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。
stop在新版jQuery中添加了2个参数：
第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；
第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候

HTML 代码

<p id="animater">
 stop()方法测试
 </p>

 <p id="button">
 <input type="button" id="button1" value="stop()"/>
 <input type="button" id="button2" value="stop(true)"/>
 <input type="button" id="button3" value="stop(false,true)"/>
 <input type="button" id="button4" value="stop(true,true)"/>
 
 </p>

CSS 代码

#animater{
 width: 150px;
 background:activeborder;
 border: 1px solid black;
 /*为了移动，需设置此属性*/
 position: relative;
 }

jquery 代码

// 为了看效果，随意写的动画
 $('#animater').animate({
 'right':-800
 }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal');



 
 // 点击不同的button执行不同的操作
 
 $('#button1').click(function(){
 //默认参数是false，不管写一个false还是两个false还是没写false效果一样
 $('#animater').stop();
 });
 $('#button2').click(function(){
 //第二个参数默认false
 $('#animater').stop(true);
 });
 $('#button3').click(function(){
 $('#animater').stop(false,true);
 });
 $('#button4').click(function(){
 $('#animater').stop(true,true);
 });

下载本文

显示全文

全部频道