jQuery的animate動畫方法及動畫排隊問題解決

時間  2021-07-25
標籤 javascript css java jquery 異步 ide 函數 動畫 this url 欄目 JQuery 简体版
原文   原文鏈接

animate（）動畫方法

  • 做用：執行css屬性集的自定義動畫javascript

  • 語法：$(selector).animate(styles,speed,easing,callback)css

    • 參數1： css 的屬性名和運動結束位置的屬性值的集合。
    • 參數2：可選，規定動畫的速度，默認是 "normal"。其餘值，「slow」、「normal」、「fast」，數字格式，單位爲毫秒。
    • 參數3：可選，規定在不一樣的動畫點中設置動畫速度的 easing 函數，值包含 swing（變速） 和linear（勻速）。
    • 參數4：可選，animate 函數執行完以後，要執行的回調函數。
    • 注意：①全部有數值的屬性值均可以運動；
    ②其餘的運動方法好比 slideUp() 等，也有參數3 和參數4java

<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");
            //實際操做中，將時間這種易變的存儲到一個變量中更好
            var during = 1000;
            //全部有數值的屬性值均可以運動
            $ps.click(function(){
                $(this).animate({"width":500,"opacity":0.5},during,"swing")
            })
        </script>
    </body>

動畫排隊

  • 同一個元素對象身上，若是定義了多個動畫，動畫會排隊等待執行。
  • 若是是不一樣的元素對象都有動畫，不會出現排隊機制。
  • 若是是其餘非運動的代碼，不會等待運動完成。好比，改變css樣式，不會排隊。
<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;
 //動畫排隊對比
 $box2.animate({"left": 400,"top":400},during)
 //box一、box2上各自進行各自的動畫
 //同一元素上的多個動畫排隊
 $box1.animate({"left": 400},during)//排隊
 $box1.animate({"top": 400}, during)
 // 動畫的底部就是一個定時器，異步加載
 // 非運動的代碼，關於同一個元素對象的，不會排隊
 //$box1.css("height",200)
 </script>
</body>
  • 自帶動畫的顯示隱藏方法，若是設置給同一個元素，也有動畫排隊
//其餘的運動方法，若是設置給同一個元素，也會發生排隊
  $box2.mouseenter(function(){
      $(this).children().slideUp(during)
  })
  $box2.mouseleave(function(){
      $(this).children().slideDown(during)
  })
  //鼠標快速的移上移下，以後box2的灰色span就一直在滑進滑出，直到執行完全部次數
  • 同一個元素身上的運動，能夠簡化成鏈式調用的方法
//同一個元素進行多個運動，能夠簡化經過鏈式調用實現
//可是仍是要進行排隊         
$box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
delay（）延遲方法
  • 將delay（）設置在某個運動方法以前，表示後面的運動要在規定的時間以後再執行，有延遲運動的效果
  • delay（）的參數是時間的數值，其餘的運動方法也有延遲效果
//延遲
$box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
stop（）中止動畫方法

  • 設置元素對象身上的排隊的動畫以何種方式進行中止jquery

  • stop（）有兩個參數，能夠獲得四種中止方式，參數都是布爾值異步

    • 參數1：設置是否清空後面的動畫排隊，若是是 true 表示清空(後面還排着的動畫也一塊兒被清除掉，再也不執行)，若是是 false 表示不清空只中止當前的一個動畫（後面的動畫當即開始執行）。
    • 參數2：設置當前動畫是否當即完成，若是是 true 表示當即完成，對象會馬上走到結束位置，若是是 false 表示不完成當前動畫，當即中止在當前位置。
    ide

<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;
  
   //同一元素上的多個動畫排隊
   $box1.animate({ "left": 400 }, during)
   $box1.animate({ "top": 400 }, during)
   $box1.animate({"left":0},during)
   $box1.animate({"top":40},during)
 
  // 中止動畫
  //添加按鈕點擊事件
  var $btn1 = $("#btn1")
  var $btn2 = $("#btn2")
  var $btn3 = $("#btn3")
  var $btn4 = $("#btn4")
  
  //true true  清空後面排隊動畫  且  當前動畫當即完成，停到結束位置
  $btn1.click(function () {
       $box1.stop(true, true);
  })
  //true false  清空動畫  停在當前
  $btn2.click(function () {
     $box1.stop(true, false);
  })
  //false false  不清空後面動畫，停在當前
  //而後執行下一步動畫
  $btn3.click(function () {
     $box1.stop(false, false);
  })
  //false true  不清空後面動畫，當前運動當即到結尾
  $btn4.click(function () {
       $box1.stop(false, true);
  })
 </script>
</body>
  • 默認狀況下，參數值爲false
  • 實際工做中，通常要求清空後面的排隊，中止當前的位置，多使用stop（true），第二個參數不設置默認爲false

清空動畫排隊

動畫排隊問題

  • 若是將開啓運動的程序放在一個事件函數中，事件屢次被觸發，會執行屢次函數，就會在一個元素身上添加了多個動畫，會進行動畫排隊。(動畫積累問題)函數

    須要去清除排隊的動畫，進行防騷擾操做。動畫

  • 解決方法this

    方法一：利用stop（）方法

    在每個運動函數以前都增長一個stop（true），表示在運動執行以前，會將前面排隊的動畫清空，而後中止在當前位置url

<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;
    //清空動畫
    $box1.mouseenter(function(){
        $(this).children().stop(true).slideUp(during)
    })

   $box1.mouseleave(function(){
       $(this).children().stop(true).slideDown(during)
   })
    </script>
</body>
方法二：利用函數節流方法

若是元素在運動，直接return，不要執行後面的運動代碼。

每一個jQuery對象，都能調用一個is（）方法，做用是顯示元素對象的某種狀態
若是參數位置是is("：animated")，animated是正在運動的意思，返回值是布爾值，true表示正在運動，false表示沒有運動

//函數節流方法
$box1.mouseenter(function(){
    if(is(":animated")){
        //若是判斷是正在運動的話，直接return返回，再也不執行其餘動畫
        return;
    }
    //沒有運動的話，則繼續執行後面的新動畫
    $(this).children().slideup(during);

})

$box1.mouseenter(function(){
    if(is(":animated")){
        //若是判斷是正在運動的話，直接return返回，再也不執行其餘動畫
        return;
    }
    //沒有運動的話，則繼續執行後面的新動畫
    //有時候爲了保險起見，會與stop（true）結合使用
    $(this).children().stop(true).slideup(during);

})

  • 有時候爲了保險起見，函數節流使用時，也會與stop（true）結合使用

  • stop（true）和函數節流方法，這兩種解決動畫積累問題的方法仍是有區別的。stop方法可使中止時，停在當前的位置，而函數節流，中止時return返回後，當前所處的動畫通常都是會執行完的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程