JQuery动画animate的stop方法使用详解_Javascript教程-查字典教程网
JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解
发布时间:2016-12-30 来源:查字典编辑
摘要:animate语法:复制代码代码如下:$(selector).animate(styles,speed,easing,callback)复制...

animate语法:

复制代码 代码如下:

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

复制代码 代码如下:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Testing</title>

<link rel="stylesheet" href="css/reset.css">

<script src="js/jquery.js"></script>

<style>

.wrap {

position: relative;

height: 300px;

width: 300px;

border:5px solid #FCF;

}

.wrap div {

position: absolute;

left: 0;top: 0;

height: 50px;

width: 50px;

background: #FA0;

}

</style>

</head>

<body>

<input type="button" id="btn1" value="停止当前动画">

<input type="button" id="btn2" value="停止所有动画">

<input type="button" id="btn3" value="停止所有动画,到达终点">

<div>

<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); // 停止所有动画 ,去的路程中点击停止会直接到达终点,若是返回过程中再点击,会停止到在起点

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类