詳解jQuery的animate動(dòng)畫(huà)方法及動(dòng)畫(huà)排隊(duì)問(wèn)題解決

更新時(shí)間：2021年05月07日 09:41:53 作者：小白可別不舉鐵

這篇文章主要介紹了jQuery的animate動(dòng)畫(huà)方法及動(dòng)畫(huà)排隊(duì)問(wèn)題解決的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用jQuery，感興趣的朋友可以了解下

animate（）動(dòng)畫(huà)方法

作用：執(zhí)行css屬性集的自定義動(dòng)畫(huà)
語(yǔ)法：$(selector).animate(styles,speed,easing,callback)

• 參數(shù)1： css 的屬性名和運(yùn)動(dòng)結(jié)束位置的屬性值的集合。
• 參數(shù)2：可選，規(guī)定動(dòng)畫(huà)的速度，默認(rèn)是 "normal"。其他值，“slow”、“normal”、“fast”，數(shù)字格式，單位為毫秒。
• 參數(shù)3：可選，規(guī)定在不同的動(dòng)畫(huà)點(diǎn)中設(shè)置動(dòng)畫(huà)速度的 easing 函數(shù)，值包含 swing（變速）和linear（勻速）。
• 參數(shù)4：可選，animate 函數(shù)執(zhí)行完之后，要執(zhí)行的回調(diào)函數(shù)。
• 注意：

①所有有數(shù)值的屬性值都可以運(yùn)動(dòng)；
②其他的運(yùn)動(dòng)方法比如 slideUp() 等，也有參數(shù)3 和參數(shù)4

 <style>
       *{
                margin: 0;
                padding: 0;
            }
            p{
                position: relative;
                left: 0;
                margin-bottom: 10px;
                background-color: skyblue;
                width: 50px;
                height: 50px;
            }
        </style>
    <!--------------------------------------->
    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
     <script src="../jq/jquery-1.12.4.min.js"></script>
     <script>
            var $ps = $("p");
            //實(shí)際操作中，將時(shí)間這種易變的存儲(chǔ)到一個(gè)變量中更好
            var during = 1000;
            //所有有數(shù)值的屬性值都可以運(yùn)動(dòng)
            $ps.click(function(){
                $(this).animate({"width":500,"opacity":0.5},during,"swing")
            })
        </script>
    </body>

動(dòng)畫(huà)排隊(duì)

同一個(gè)元素對(duì)象身上，如果定義了多個(gè)動(dòng)畫(huà)，動(dòng)畫(huà)會(huì)排隊(duì)等待執(zhí)行。
如果是不同的元素對(duì)象都有動(dòng)畫(huà)，不會(huì)出現(xiàn)排隊(duì)機(jī)制。
如果是其他非運(yùn)動(dòng)的代碼，不會(huì)等待運(yùn)動(dòng)完成。比如，改變css樣式，不會(huì)排隊(duì)。

<style>
  div{
       width: 100px;
       height: 100px;
       border: 8px solid #ccc;
       position: absolute;
       left: 0;
       top: 0;
       background: url(../../imgs/1.jpg) no-repeat center center;
     }
.box2{
      border-radius: 50%;
      overflow: hidden;
       }
div span{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(221, 130, 130, 0.4);
     }
</style>
  <!-------------css樣式------------------->
<body>
  <div class="box1"><span></span></div>
  <div class="box2"><span></span></div>
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
 var $box1 = $(".box1");
 var $box2 = $(".box2");
 var during = 2000;
 //動(dòng)畫(huà)排隊(duì)對(duì)比
 $box2.animate({"left": 400,"top":400},during)
 //box1、box2上各自進(jìn)行各自的動(dòng)畫(huà)
 //同一元素上的多個(gè)動(dòng)畫(huà)排隊(duì)
 $box1.animate({"left": 400},during)//排隊(duì)
 $box1.animate({"top": 400}, during)
 // 動(dòng)畫(huà)的底部就是一個(gè)定時(shí)器，異步加載
 // 非運(yùn)動(dòng)的代碼，關(guān)于同一個(gè)元素對(duì)象的，不會(huì)排隊(duì)
 //$box1.css("height",200)
 </script>
</body>

自帶動(dòng)畫(huà)的顯示隱藏方法，如果設(shè)置給同一個(gè)元素，也有動(dòng)畫(huà)排隊(duì)

//其他的運(yùn)動(dòng)方法，如果設(shè)置給同一個(gè)元素，也會(huì)發(fā)生排隊(duì)
  $box2.mouseenter(function(){
      $(this).children().slideUp(during)
  })
  $box2.mouseleave(function(){
      $(this).children().slideDown(during)
  })
  //鼠標(biāo)快速的移上移下，之后box2的灰色span就一直在滑進(jìn)滑出，直到執(zhí)行完所有次數(shù)

同一個(gè)元素身上的運(yùn)動(dòng)，可以簡(jiǎn)化成鏈?zhǔn)秸{(diào)用的方法

//同一個(gè)元素進(jìn)行多個(gè)運(yùn)動(dòng)，可以簡(jiǎn)化通過(guò)鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)
//但是還是要進(jìn)行排隊(duì)         
$box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

delay（）延遲方法

將delay（）設(shè)置在某個(gè)運(yùn)動(dòng)方法之前，表示后面的運(yùn)動(dòng)要在規(guī)定的時(shí)間之后再執(zhí)行，有延遲運(yùn)動(dòng)的效果
delay（）的參數(shù)是時(shí)間的數(shù)值，其他的運(yùn)動(dòng)方法也有延遲效果

   //延遲
$box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

stop（）停止動(dòng)畫(huà)方法

設(shè)置元素對(duì)象身上的排隊(duì)的動(dòng)畫(huà)以何種方式進(jìn)行停止
stop（）有兩個(gè)參數(shù)，可以得到四種停止方式，參數(shù)都是布爾值

• 參數(shù)1：設(shè)置是否清空后面的動(dòng)畫(huà)排隊(duì)，如果是 true 表示清空(后面還排著的動(dòng)畫(huà)也一起被清除掉，不再執(zhí)行)，如果是 false 表示不清空只停止當(dāng)前的一個(gè)動(dòng)畫(huà)（后面的動(dòng)畫(huà)立即開(kāi)始執(zhí)行）。
• 參數(shù)2：設(shè)置當(dāng)前動(dòng)畫(huà)是否立即完成，如果是 true 表示立即完成，對(duì)象會(huì)立刻走到結(jié)束位置，如果是 false 表示不完成當(dāng)前動(dòng)畫(huà)，立即停止在當(dāng)前位置。

<style>
 div {
      width: 100px;
      height: 100px;
      border: 8px solid #ccc;
      position: absolute;
      left: 0;
      top: 40;
      background: url(../../imgs/1.jpg) no-repeat center center;
   }  
 div span {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(221, 130, 130, 0.4);
    }
 </style>
</head>
  
<body>
 <input type="button" value="true true" id="btn1">
 <input type="button" value="true false" id="btn2">
 <input type="button" value="false false" id="btn3">
 <input type="button" value="false true" id="btn4"><br>
  
 <div class="box1"><span></span></div>
  
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
   var $box1 = $(".box1");
  
   var during = 2000;
  
   //同一元素上的多個(gè)動(dòng)畫(huà)排隊(duì)
   $box1.animate({ "left": 400 }, during)
   $box1.animate({ "top": 400 }, during)
   $box1.animate({"left":0},during)
   $box1.animate({"top":40},during)
 
  // 停止動(dòng)畫(huà)
  //添加按鈕點(diǎn)擊事件
  var $btn1 = $("#btn1")
  var $btn2 = $("#btn2")
  var $btn3 = $("#btn3")
  var $btn4 = $("#btn4")
  
  //true true  清空后面排隊(duì)動(dòng)畫(huà)  且  當(dāng)前動(dòng)畫(huà)立即完成，停到結(jié)束位置
  $btn1.click(function () {
       $box1.stop(true, true);
  })
  //true false  清空動(dòng)畫(huà)  停在當(dāng)前
  $btn2.click(function () {
     $box1.stop(true, false);
  })
  //false false  不清空后面動(dòng)畫(huà)，停在當(dāng)前
  //然后執(zhí)行下一步動(dòng)畫(huà)
  $btn3.click(function () {
     $box1.stop(false, false);
  })
  //false true  不清空后面動(dòng)畫(huà)，當(dāng)前運(yùn)動(dòng)立即到結(jié)尾
  $btn4.click(function () {
       $box1.stop(false, true);
  })
 </script>
</body>

默認(rèn)情況下，參數(shù)值為false
實(shí)際工作中，一般要求清空后面的排隊(duì)，停止當(dāng)前的位置，多使用stop（true），第二個(gè)參數(shù)不設(shè)置默認(rèn)為false

清空動(dòng)畫(huà)排隊(duì)

動(dòng)畫(huà)排隊(duì)問(wèn)題

如果將開(kāi)啟運(yùn)動(dòng)的程序放在一個(gè)事件函數(shù)中，事件多次被觸發(fā)，會(huì)執(zhí)行多次函數(shù)，就會(huì)在一個(gè)元素身上添加了多個(gè)動(dòng)畫(huà)，會(huì)進(jìn)行動(dòng)畫(huà)排隊(duì)。(動(dòng)畫(huà)積累問(wèn)題)

需要去清除排隊(duì)的動(dòng)畫(huà)，進(jìn)行防騷擾操作。

解決方法

方法一：利用stop（）方法

在每一個(gè)運(yùn)動(dòng)函數(shù)之前都增加一個(gè)stop（true），表示在運(yùn)動(dòng)執(zhí)行之前，會(huì)將前面排隊(duì)的動(dòng)畫(huà)清空，然后停止在當(dāng)前位置

<style>
 div {
     width: 100px;
     height: 100px;
     border: 8px solid #ccc;
     position: absolute;
     left: 0;
     top: 0;
     background: url(../../imgs/1.jpg) no-repeat center center;
   } 
div span {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(221, 130, 130, 0.4);
  }
  </style>
<body>
  <input type="button" value="true true" id="btn1">
  <input type="button" value="true false" id="btn2">
  <input type="button" value="false false" id="btn3">
  <input type="button" value="false true" id="btn4"><br>

  <div class="box1"><span></span></div>

  <script src="../jq/jquery-1.12.4.min.js"></script>
  <script>
     var $box1 = $(".box1");

     var during = 2000;
    //清空動(dòng)畫(huà)
    $box1.mouseenter(function(){
        $(this).children().stop(true).slideUp(during)
    })

   $box1.mouseleave(function(){
       $(this).children().stop(true).slideDown(during)
   })
    </script>
</body>

方法二：利用函數(shù)節(jié)流方法

如果元素在運(yùn)動(dòng)，直接return，不要執(zhí)行后面的運(yùn)動(dòng)代碼。

每個(gè)jQuery對(duì)象，都能調(diào)用一個(gè)is（）方法，作用是顯示元素對(duì)象的某種狀態(tài)
如果參數(shù)位置是is("：animated")，animated是正在運(yùn)動(dòng)的意思，返回值是布爾值，true表示正在運(yùn)動(dòng)，false表示沒(méi)有運(yùn)動(dòng)

//函數(shù)節(jié)流方法
$box1.mouseenter(function(){
    if(is(":animated")){
        //如果判斷是正在運(yùn)動(dòng)的話(huà)，直接return返回，不再執(zhí)行其他動(dòng)畫(huà)
        return;
    }
    //沒(méi)有運(yùn)動(dòng)的話(huà)，則繼續(xù)執(zhí)行后面的新動(dòng)畫(huà)
    $(this).children().slideup(during);

})

$box1.mouseenter(function(){
    if(is(":animated")){
        //如果判斷是正在運(yùn)動(dòng)的話(huà)，直接return返回，不再執(zhí)行其他動(dòng)畫(huà)
        return;
    }
    //沒(méi)有運(yùn)動(dòng)的話(huà)，則繼續(xù)執(zhí)行后面的新動(dòng)畫(huà)
    //有時(shí)候?yàn)榱吮ｋU(xiǎn)起見(jiàn)，會(huì)與stop（true）結(jié)合使用
    $(this).children().stop(true).slideup(during);

})

有時(shí)候?yàn)榱吮ｋU(xiǎn)起見(jiàn)，函數(shù)節(jié)流使用時(shí)，也會(huì)與stop（true）結(jié)合使用
stop（true）和函數(shù)節(jié)流方法，這兩種解決動(dòng)畫(huà)積累問(wèn)題的方法還是有區(qū)別的。stop方法可以使停止時(shí)，停在當(dāng)前的位置，而函數(shù)節(jié)流，停止時(shí)return返回后，當(dāng)前所處的動(dòng)畫(huà)一般都是會(huì)執(zhí)行完的。

以上就是詳解jQuery的animate動(dòng)畫(huà)方法及動(dòng)畫(huà)排隊(duì)問(wèn)題解決的詳細(xì)內(nèi)容，更多關(guān)于jQuery animate動(dòng)畫(huà)方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: