.stop() / .finish()——停止正在运行的动画 / 停止所有动画并到指定目标点

一、.stop()——停止正在运行的动画

描述：停止正在运行过程中的动画

写法：

1、元素.stop();

停止形式：停止正在运行的动画，如果重新开始动画，没执行的动画会继续执行

$('#div1').stop();

2、元素.stop(是否停止未执行完的动画，是否将正在执行的动画跳到末状态);

 

参数：

　　参数1：布尔值，如果为true则停止当前动画，清空后续动画

　　参数2：布尔值，如果为true则将正在执行的动画直接变为结束时的状态，只能到当前正在运行的动画的结束状态，不能到后续还没执行的动画的结束状态

$('#div1').stop(true，true);   //停止当前动画，直接到达当前动画的末状态，并清空动画序列
$('#div1').stop(false，true);  //当前动画直接到达末状态  

例子：

$("#start").click(function(){
    $("#box").animate({height:300},2000);
    $("#box").animate({height:100},2000);
});
$("#stop").click(function(){
    $("#box").stop();  //点击一次如果第一个动画正在运行就停止第一个animate，再点击一次就停止第二个animate
});
$("#stop").click(function(){
    $("#box").stop(true);  //如果点击的时候第一个动画正在执行，停止第一个动画，后面的第二个动画也不会执行
});
$("#stop").click(function(){
    $("#box").stop(true,true);  //停止当前动画的执行，直接变为当前动画的结束状态。如果动画1正在执行，直接变为height300，如果是动画2在执行直接变为height100
});

 

二、 .finish()——停止所有动画并到指定目标点

描述：停止元素所有的动画，包括还没执行的动画，直接变为动画结束后应有的目标状态

写法：元素.finish()

$("#start").click(function(){ //点击按钮执行动画
    $("#box").animate({height:300},2000);
    $("#box").animate({height:100},2000);
});
$("#stop").click(function(){
    $('#box').finish(); //无论什么时候点击按钮，都会停止所有动画的执行，直接变为height为100的状态 
});