jQuery中停止动画

jQuery中停止动画stop
演示代码
$("#btnStop").click(function () {
var value = $("#cboStop").val();
var $demo = $(".demo1");
if (value==“1”) {
$demo.stop()
} else if (value == “2”) {
$demo.stop(true)
} else if (value == “3”) {
$demo.stop(true, true);
}
});
动画在执行过程中被允许暂停,当一个元素调用.stop()方法,当前运行-的动画就立即停止

语法解析:
.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

Stop还有三种可选的参数:
.stop(); 停止当前动画,点击在暂停处继续开始
.stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
.stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值
、简单的说:参考下面代码、
$("#demo").animate({
height: 300
}, 5000)
$("#demo").animate({
width: 300
}, 5000)
$("#demo").animate({
opacity: 0.6
}, 2000)
stop():只会停止第一个动画,第二个第三个继续
stop(true):停止第一个、第二个和第三个动画
stop(true ture):停止动画,直接跳到第一个动画的最终状态
设置停止动画按钮的点击事件:
$("#btnStart").click(function () {
$(".demo1").animate({
height:300
},5000);
$(".demo1").animate({
width: 300
},5000);
$(".demo1").animate({
opacity: 0.3
},2000);
});
停止动画按钮点击事件:
$("#btnStop").click(function () {
var value = $("#cboStop").val();
var $demo = $(".demo1");
if (value==“1”) {
$demo.stop()
} else if (value == “2”) {
$demo.stop(true)
} else if (value == “3”) $demo.stop(true, true);
}

上一篇:jQuery练习t266,从0到1


下一篇:手风琴动画效果