手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解
摘要: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); // 停止所有动画 ,去的路程中点击停止会直接到达终点,若是返回过程中再点击,会停止到在起点

【JQuery动画animate的stop方法使用详解】相关文章:

JavaScript的正则表达式中test()方法的使用

简介JavaScript中的getUTCFullYear()方法的使用

JavaScript中的Math.LN2属性用法详解

JQuery中层次选择器用法实例详解

JavaScript中的small()方法使用详解

jQuery中 prop() attr()使用详解

Jquery中基本选择器用法实例详解

JavaScript中reduce()方法的使用详解

JavaScript中的Math.LOG2E属性使用详解

JQuery实现动态添加删除评论的方法

精品推荐
分类导航