jQuery stop()方法用法詳解

antzone發表於2017-04-12
jQuery

本章節將會通過程式碼例項介紹一下stop()方法的用法。

先來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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。

下面就對引數的作用進行一下介紹，再來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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元素立刻停止所有動畫。

再來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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時，只會停止當前正在執行的動畫，後面的動畫則繼續執行。

下面再來介紹一下第二個引數的作用，先來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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，表示當前正在執行的動畫在會被完成，但是完成並不是以動畫的形式。再來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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，表示當前執行的動畫不被完成。

相關文章