jquery stop()停止当前所有动画效果

stop()函数用于停止当前匹配元素上正在运行的动画。

stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，

这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为:

jQueryObject.stop( [ queueName ] [, clearQueue [, jumpToEnd ] ] )

其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，

前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。

HTML页面：

停止效果：
<select id="animation" >
	<option value="1">停止1</option>
	<option value="2">停止2</option>
	<option value="3">停止3</option>
	<option value="4">停止4</option>
</select>
<input id="my" type="button" value="执行动画" />
</p>
<div id="div1">
    <h5 class="head">jQuery stop()方法</h5>
<div id="myDiv">jquery调用stop()方法停止当前所有动画效果
stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为:
$(selector).stop([clearQueue],[goToEnd])
</div>
</div>

CSS :

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}

.head {
    padding: 5px;
    background:#CFC;
    cursor: pointer;
    width: 320px;
}
body {
    font-size: 13px;
    line-height: 130%;
    padding: 60px
}

#div1 {
    width: 60px;
    border: 1px solid #0050D0;
    height: 22px;
    overflow: hidden;
}
#myDiv {
    padding: 10px;
    text-indent: 2em;
    border-top: 1px solid #0050D0;
    display: block;
    width: 280px;
}
</style>

JS：

<script type="text/javascript">
$(function(){
$("#my").click( function(){
	 $("#div1").animate({height:"150" }, 1000)
	 .animate({width:"300" },1000). hide(2000)
	 .animate({height:"show", width:"show", opacity:"show" }, 1000)
	 .animate({height:"500"},1000);	
} );

$("#animation").change(function(){
	//获得下拉列表的值
	var v=$(this).val();	
	//判断
	if(v==1){
	   $("#div1").stop();	 // 停止当前动画，继续下一个动画
	}else if(v==2){
	    $("#div1").stop(true);// 停止当前动画，清空队列(停止全部)[清除元素的所有动画]
	}else if(v == "3"){
		 $("#div1").stop( false, true ); // 让当前动画直接到达末状态 ，继续下一个
	}else if(v == "4"){
		 $("#div1").stop( true, true ); // 清空队列，直接完成当前动画
	}	
});

});
</script>

 效果：

 1）运行时

2）单击执行动画

3)选择停止1

3)选择停止2

3)选择停止3

3)选择停止4