jQuery stop()方法用法详解

快乐打工仔 分类:实例代码

本章节将会通过代码实例介绍一下stop()方法的用法。

先来看一段代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  top: 40px;
  left: 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $('.play').on('click',function(){
    $('div').animate({'left':'400px'},2000);
  })
  $('.stop').on('click',function(){
    $('div').stop();
  })
})
</script>
</head>
<body>
<div></div>
<button class="play">play</button>
<button class="stop">stop</button>
</body>
</html>

上面的代码是stop()函数的最基本的应用,当点击play按钮开始动画之后,点击stop按钮就会停止动画的执行。

但是stop()函数的使用并非如此简单,此函数可以具有两个参数,如果不写参数,那么两个参数默认为false。

下面就对参数的作用进行一下介绍,再来看一段代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  top: 40px;
  left: 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $('.play').on('click',function(){
    $('div').animate({'left':'400px'},2000).animate({'width':'10px'},2000);
  })
  $('.stop').on('click',function(){
    $('div').stop(true);
  })
})
</script>
</head>
<body>
<div></div>
<button class="play">play</button>
<button class="stop">stop</button>
</body>
</html>

如果第一个参数为true,则停止动画队列中的所有动画,所以点击stop按钮之后,div元素立刻停止所有动画。

再来看一段代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  top: 40px;
  left: 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $('.play').on('click',function(){
    $('div').animate({'left':'400px'},2000).animate({'width':'10px'},2000);
  })
  $('.stop').on('click',function(){
    $('div').stop();
  })
})
</script>
</head>
<body>
<div></div>
<button class="play">play</button>
<button class="stop">stop</button>
</body>
</html>

在开始已经提到,如果stop()省略参数,那么两个参数默认值是false。这个时候点击stop按钮之后,动画队列中,当前正在执行的动画就会停止,而是继续完成队列中后面的动画。

第一个参数总结:

(1).当参数为true时,表示要停止队列中的所有动画的执行。

(2).当参数为false时,只会停止当前正在执行的动画,后面的动画则继续执行。

下面再来介绍一下第二个参数的作用,先来看一段代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  top: 40px;
  left: 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $('.play').on('click',function(){
    $('div').animate({'left':'400px'},2000).animate({'width':'10px'},2000);
  })
  $('.stop').on('click',function(){
    $('div').stop(true,true);
  })
})
</script>
</head>
<body>
<div></div>
<button class="play">play</button>
<button class="stop">stop</button>
</body>
</html>

上面的代码中,stop()第一个参数是true,表示要停止队列中的所有的动画,第二个参数是true,表示当前正在执行的动画在会被完成,但是完成并不是以动画的形式。再来看一段代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  top: 40px;
  left: 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $('.play').on('click',function(){
    $('div').animate({'left':'400px'},2000).animate({'width':'10px'},2000);
  })
  $('.stop').on('click',function(){
    $('div').stop(true,false);
  })
})
</script>
</head>
<body>
<div></div>
<button class="play">play</button>
<button class="stop">stop</button>
</body>
</html>

代码中,stop()第一个参数是true,表示要停止队列中的所有的动画,第二个参数是false,表示当前正在执行的动画不会被完成。

第二个参数总结:

(1).当参数为true,表示当前正在执行的动画会被立刻完成。

(2).当参数为false,表示当前执行的动画不被完成。

回复

我来回复
  • 暂无回复内容