9. jQuery 停止动画
2015-08-27 16:01
633 查看
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法,不带参数:
实例
jQuery stop() 动画(带有参数)
演示 jQuery stop() 方法。
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法,不带参数:
实例
$("#stop").click(function(){ $("#panel").stop(); });
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){ $("#panel").stop(); });
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击这里,向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
jQuery stop() 动画(带有参数)
演示 jQuery stop() 方法。
<!DOCTYPE html> <html> <head> <script src="/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> <button id="start">开始</button> <button id="stop">停止</button> <button id="stop2">停止所有</button> <button id="stop3">停止但要完成</button> <p><b>"开始"</b> 按钮会启动动画。</p> <p><b>"停止"</b> 按钮会停止当前活动的动画,但允许已排队的动画向前执行。</p> <p><b>"停止所有"</b> 按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。</p> <p><b>"停止但要完成"</b> 会立即完成当前活动的动画,然后停下来。</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body> </html>
相关文章推荐
- 8. jQuery 效果 - 动画
- jQuery添加元素节点
- jquery之getJSON
- jQuery实现响应鼠标背景变化的动态菜单效果代码
- 7. jQuery 效果 - 滑动
- Flexslider - 响应式的 jQuery 内容滚动插件
- JS 中 和 JQuery 的 this 关键字
- 6. jQuery 效果 - 淡入淡出
- jquery 幻灯片图像切换效果
- 5. jQuery 效果 - 隐藏和显示
- jQuery实现带幻灯的tab滑动切换风格菜单代码
- jquery图片倾斜层叠切换特效代码分享
- jQuery网格插件 ParamQuery Grid
- jQueryMobile的组件——可展开项(collapsible)
- 兼容各浏览器的点击复制文本框内容的Jquery插件
- jQuery效果积累
- jQuery插件开发精品教程,让你的jQuery提升一个台阶
- jquery带动画效果幻灯片特效代码
- 细说 jQuery - 事件传播
- jQueryMobile的组件——复选框(checkbox)和单选钮(radio)