JQuery动画animate的stop方法使用详解

animate语法:

复制代码 代码如下:

$(selector).animate(styles,speed,easing,callback)

复制代码 代码如下:

<div></div>

</div>

<script>

function moveX(){

$('.wrap div').animate({'left':'250px'},1000).animate({'left':'0px'},1000);

} moveX();

$('#btn1').click(function(){

$('.wrap div').stop(); // 停止当前动画,沿路返回起点,若是返回过程中再点击,会暂停在路中

clearInterval();

})

$('#btn2').click(function(){

$('.wrap div').stop(true); // 停止所有动画 去的路程中点击停止会直接到达终点,若是返回过程中再点击,会暂停在路中

})

$('#btn3').click(function(){

$('.wrap div').stop(true,true); // 停止所有动画 ,去的路程中点击停止会直接到达终点,若是返回过程中再点击,会停止到在起点

})

// .stop() // 停止当前动画

// .stop(true) // 停止所有动画

// .stop(true,true) // 停止所有动画,到达动画终点

</script>

</body>

</html>

.stop(); // 停止当前动画,沿路返回起点,若是返回过程中再点击,会暂停在路中

.stop(true); // 停止所有动画 去的路程中点击停止会直接到达终点,若是返回过程中再点击,会暂停在路中

.stop(true,true); // 停止所有动画 ,去的路程中点击停止会直接到达终点,若是返回过程中再点击,会停止到在起点