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

  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 class="wrap">

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