提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery动画方法 使用 详解 Stop animate
2023-06-13 09:15:26 时间
animate语法：
复制代码代码如下:

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

复制代码代码如下:

<!doctypehtml>
<html>
<head>
<metacharset="UTF-8">
<title>Testing</title>
<linkrel="stylesheet"href="css/reset.css">
<scriptsrc="js/jquery.js"></script>
<style>
.wrap{
position:relative;
height:300px;
width:300px;
border:5pxsolid#FCF;
}
.wrapdiv{
position:absolute;
left:0;top:0;
height:50px;
width:50px;
background:#FA0;
}
</style>
</head>
<body>
<inputtype="button"id="btn1"value="停止当前动画">
<inputtype="button"id="btn2"value="停止所有动画">
<inputtype="button"id="btn3"value="停止所有动画，到达终点">
<divclass="wrap">
<div></div>
</div>
<script>
functionmoveX(){
$(".wrapdiv").animate({"left":"250px"},1000).animate({"left":"0px"},1000);
}moveX();

$("#btn1").click(function(){
$(".wrapdiv").stop();//停止当前动画,沿路返回起点，若是返回过程中再点击，会暂停在路中
clearInterval();
})

$("#btn2").click(function(){
$(".wrapdiv").stop(true);//停止所有动画去的路程中点击停止会直接到达终点，若是返回过程中再点击，会暂停在路中
})

$("#btn3").click(function(){
$(".wrapdiv").stop(true,true);//停止所有动画，去的路程中点击停止会直接到达终点，若是返回过程中再点击，会停止到在起点
})

//.stop()//停止当前动画
//.stop(true)//停止所有动画
//.stop(true,true)//停止所有动画，到达动画终点
</script>
</body>
</html>

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

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

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

相关文章