jQuery如何使用stop()方法停止动画
这篇文章主要介绍jQuery如何使用stop()方法停止动画,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
jQuery 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画:
<!DOCTYPEhtml><html><head><scriptsrc="../jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("#flip").click(function(){$("#panel").slideDown(5000);});$("#stop").click(function(){$("#panel").stop();});});</script><styletype="text/css">#panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid1px#c3c3c3;}#panel{padding:50px;display:none;}</style></head><body><buttonid="stop">停止滑动</button><divid="flip">点击这里,向下滑动面板</div><divid="panel">Helloworld!</div></body></html>
jQuery stop() 动画实例(带参数)
<!DOCTYPEhtml><html><head><scriptsrc="../jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("#start").click(function(){$("div").animate({left:"100px"},5000);$("div").animate({fontSize:"3em"},5000);});$("#stop").click(function(){$("div").stop();});$("#stop2").click(function(){$("div").stop(true);});$("#stop3").click(function(){$("div").stop(true,true);});});</script></head><body><buttonid="start">开始</button><buttonid="stop">停止</button><buttonid="stop2">停止所有</button><buttonid="stop3">停止但要完成</button><p><b>"开始"</b>按钮会启动动画。</p><p><b>"停止"</b>按钮会停止当前活动的动画,但允许已排队的动画向前执行。</p><p><b>"停止所有"</b>按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。</p><p><b>"停止但要完成"</b>会立即完成当前活动的动画,然后停下来。</p><divstyle="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div></body></html>
以上是“jQuery如何使用stop()方法停止动画”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。