007_停止动画或效果

1. jQuery stop()方法

1.1. jQuery stop()方法用于在动画或效果完成前对它们进行停止。

1.2. stop()方法适用于所有jQuery效果函数, 包括隐藏显示、淡入淡出、滑动和自定义动画。

1.3. 语法

$(selector).stop(stopAll,goToEnd);

1.4. 可选的stopAll参数规定是否应该清除动画队列。默认是false, 即仅停止活动的动画, 允许任何排入队列的动画向后执行。如果为true, 当前活动动画停止, 同时也清空动画队列。

1.5. 可选的goToEnd参数规定是否立即完成当前活动动画。默认是false。

1.6. 因此, 默认地stop()会清除在被选元素上指定的当前活动动画, 允许任何排入队列的动画向后执行。

1.7. 下面的例子演示stop()方法, 不带参数:

$("#stop").click(function(){$("#panel").stop();
});

2. 例子

2.1. 代码

<!DOCTYPE html>
<html><head><title>jQuery停止动画或效果</title><meta charset="utf-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("div").hide(3000);$("div").show(3000);});$('#btn2').click(function(){$("div").fadeOut(3000);$("div").fadeIn(3000);});$('#btn3').click(function(){$("div").slideUp(3000);$("div").slideDown(3000);});$('#btn4').click(function(){var div = $("div");div.animate({height:'+=100px', opacity: '0.5', fontSize: '2em'}, "slow");div.animate({width:'+=50px', opacity: '0.1', fontSize: '3em'}, "1000");div.animate({height:'+=100px', opacity: '0.5', fontSize: '2em'}, "2000");div.animate({width:'+=50px', opacity: '1', fontSize: '1em'}, "slow");});$('#btn5').click(function(){$("div").stop();});$('#btn6').click(function(){$("div").stop(false, false);});$('#btn7').click(function(){$("div").stop(true, false);});$('#btn8').click(function(){$("div").stop(false, true);});$('#btn9').click(function(){$("div").stop(true, true);});});</script></head><body><button id="btn1">3s隐藏效果/3s显示效果</button><button id="btn2">3s淡出效果/3s淡入效果</button><button id="btn3">3s向上滑动效果/3s向下滑动效果</button><button id="btn4">动画</button><br /><br /><button id="btn5">(默认)停止动画或效果</button> <button id="btn6">停止动画或效果</button> <button id="btn7">清除动画队列, 停止动画或效果</button><button id="btn8">当前动画立即完成</button> <button id="btn9">清除动画队列, 当前动画立即完成</button><br /><br /><div style="background-color: red; width:300px; height: 150px; position: relative;">jQuery stop()方法用于在动画或效果完成前对它们进行停止。</div></body>
</html>

2.2. 效果图

007_停止动画或效果相关推荐

jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
jQuery停止动画效果
stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法: 参数: stopAll:可选,规定是否应该清除动 ...
jQuery停止动画
stop() 停止动画或效果,在它们完成之前适用于所有jQuery效果函数,包括滑动.淡入淡出和自定义动画 $("#stop").click(function(){$(" ...
jQuery 停止动画
http://www.runoob.com/jquery/jquery-stop.html jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 实例 jQu ...
html 放上去动画停止,使用jQuery的animate()+CSS样式实现动画效果及stop()停止动画
01第1节:jQuery动画概述 #JavaScript#在jQuery中,除了可以淡入淡出.滑动效果之外,还可以使用animate()方法创建自定义的动画效果. 对于自定义的动画函数animate( ...
javafx 动画没效果_通过JavaFX标注制作动画效果
javafx 动画没效果在本文中,您将学习如何使用JavaFX的动画API创建标注. 您可以在https://www.youtube.com/watch?v=XTHbB0LRdT4的 YouTube ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
jQuery 开始动画，停止动画
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
按钮背景过渡css3,使用CSS3点击按钮实现背景渐变动画的效果
这篇文章给大家介绍的是,利用CSS3实现当点击按钮的时候,按钮的背景是渐变动画的效果,实现后的效果非常好,开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受,感兴趣的朋友们下面来一起看看吧. 效果 ...

007_停止动画或效果

007_停止动画或效果相关推荐

最新文章

热门文章