相关文章:

jQuery.stop() 函数详解

代码类型:

杂项:

  • 启用CSS/JS语法检查
  • 监测脚本运行错误
  • 禁止库文件重复

文档类型:

JS库文件:

手动添加:

  1. jQuery 1.11.1
 
1
<p>
2
停止效果：
3
<select id="animation">
4
    <option value="1">停止1</option>
5
    <option value="2">停止2</option>
6
    <option value="3">停止3</option>
7
    <option value="4">停止4</option>
8
</select>
9
<input id="exec" type="button" value="执行动画" />
10
<input id="stop" type="button" value="停止动画" />
11
</p>
12
<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>
xxxxxxxxxx
21
 
1
$("#exec").click( function(){
2
    var $myDiv = $("#myDiv");
3
    // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
4
    $myDiv.animate( { height: "+=300px" }, 2000 );
5
    $myDiv.animate( { width: "50%" }, 1000 );
6
    $myDiv.animate( { width: "200px", height: "100px" }, 1000 );
7
} );
8
​
9
$("#stop").click( function(){
10
    var v = $("#animation").val();
11
    var $myDiv = $("#myDiv");
12
    if(v == "1"){
13
        $myDiv.stop( ); // 停止当前动画，不清空队列
14
    }else if(v == "2"){
15
        $myDiv.stop( true ); // 停止当前动画，清空队列(停止全部)
16
    }else if(v == "3"){
17
        $myDiv.stop( "fx", true ); // 等同于"2"
18
    }else if(v == "4"){
19
        $myDiv.stop( true, true ); // 清空队列，直接完成当前动画
20
    }
21
} );
​x
 
1
​