jQueryのanimateアニメーションメソッドとアニメーションキューイング問題の解決方法の詳しい説明

 <スタイル>
       *{
                マージン: 0;
                パディング: 0;
            }
            p{
                位置: 相対的;
                左: 0;
                下マージン: 10px;
                背景色: スカイブルー;
                幅: 50px;
                高さ: 50px;
            }
        </スタイル>
    <!--------------------------------------->
    <本文>
        <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>
     <スクリプト>
            var $ps = $("p");
            //実際の操作では、揮発性の時間を変数 var during = 1000 に格納する方が適切です。
            //数値を持つ属性値はすべて移動可能 $ps.click(function(){
                $(this).animate({"width":500,"opacity":0.5},during,"swing")
            })
        </スクリプト>
    </本文>

<スタイル>
  div{
       幅: 100ピクセル;
       高さ: 100px;
       境界線: 8px 実線 #ccc;
       位置: 絶対;
       左: 0;
       上: 0;
       背景: url(../../imgs/1.jpg) 繰り返しなし 中央 中央;
     }
.box2{
      境界線の半径: 50%;
      オーバーフロー: 非表示;
       }
div スパン{
       位置: 絶対;
       左: 0;
       上: 0;
       幅: 100%;
       高さ: 100%;
       背景色: rgba(221, 130, 130, 0.4);
     }
</スタイル>
  <!-------------css スタイル------------------>
<本文>
  <div class="box1"><span></span></div>
  <div class="box2"><span></span></div>
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<スクリプト>
 var $box1 = $(".box1");
 var $box2 = $(".box2");
 var 期間中 = 2000;
 //アニメーションキューの比較 $box2.animate({"left": 400,"top":400},during)
 //Box1 と box2 はそれぞれ独自のアニメーションを実行します //同じ要素に複数のアニメーションをキューに入れます $box1.animate({"left": 400},during) //キューに入れます $box1.animate({"top": 400}, during)
 // アニメーションの下部はタイマーで、非同期読み込みです // 同じ要素オブジェクトに関する非モーションコードはキューに入れられません // $box1.css ("height", 200)
 </スクリプト>
</本文>

//他の移動方法も同じ要素に設定されている場合、キューに追加されます$box2.mouseenter(function(){
      $(this).children().slideUp(実行中)
  })
  $box2.mouseleave(関数(){
      $(this).children().slideDown(実行中)
  })
  //マウスが素早く上下に動き、box2 の灰色の領域がすべての回数実行されるまでスライドし続けます。

// 同じ要素の複数の移動は、チェーン呼び出しによって簡素化できます // ただし、キューに入れる必要があります $box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

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

<スタイル>
 div {
      幅: 100ピクセル;
      高さ: 100px;
      境界線: 8px 実線 #ccc;
      位置: 絶対;
      左: 0;
      トップ: 40;
      背景: url(../../imgs/1.jpg) 繰り返しなし 中央 中央;
   }  
 div スパン {
      位置: 絶対;
      左: 0;
      上: 0;
      幅: 100%;
      高さ: 100%;
      背景色: rgba(221, 130, 130, 0.4);
    }
 </スタイル>
</head>
  
<本文>
 <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>
<スクリプト>
   var $box1 = $(".box1");
  
   var 期間中 = 2000;
  
   // 同じ要素に複数のアニメーションをキューに入れる $box1.animate({ "left": 400 }, during)
   $box1.animate({ "top": 400 }, 中)
   $box1.animate({"left":0},途中)
   $box1.animate({"top":40},アニメーション中)
 
  // アニメーションを停止 // ボタンクリックイベントを追加 var $btn1 = $("#btn1")
  var $btn2 = $("#btn2")
  var $btn3 = $("#btn3")
  var $btn4 = $("#btn4")
  
  //true true キューに入れられたアニメーションをクリアし、現在のアニメーションを直ちに完了し、終了位置で停止します$btn1.click(function () {
       停止します。
  })
  //true false アニメーションをクリアして現在の位置で停止します $btn2.click(function () {
     停止します。
  })
  //false false 次のアニメーションをクリアせず、現在のアニメーションで停止し、次のアニメーションを実行します $btn3.click(function () {
     停止します。
  })
  //false true 次のアニメーションをクリアしない、現在の動きはすぐに終了します$btn4.click(function () {
       $box1.stop(偽、真);
  })
 </スクリプト>
</本文>

<スタイル>
 div {
     幅: 100ピクセル;
     高さ: 100px;
     境界線: 8px 実線 #ccc;
     位置: 絶対;
     左: 0;
     上: 0;
     背景: url(../../imgs/1.jpg) 繰り返しなし 中央 中央;
   } 
div スパン {
     位置: 絶対;
     左: 0;
     上: 0;
     幅: 100%;
     高さ: 100%;
     背景色: rgba(221, 130, 130, 0.4);
  }
  </スタイル>
<本文>
  <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>
  <スクリプト>
     var $box1 = $(".box1");

     var 期間中 = 2000;
    // アニメーションをクリアする $box1.mouseenter(function(){
        $(this).children().stop(true).slideUp(実行中)
    })

   $box1.mouseleave(関数(){
       $(this).children().stop(true).slideDown(実行中)
   })
    </スクリプト>
</本文>

//関数スロットリングメソッド $box1.mouseenter(function(){
    if(is(":animated")){
        // 動いていると判断された場合はそのまま戻り、他のアニメーションは実行されなくなります。
    }
    //動きがない場合は、次の新しいアニメーション $(this).children().slideup(during); を実行し続けます。

})

$box1.mouseenter(関数(){
    if(is(":animated")){
        // 動いていると判断された場合はそのまま戻り、他のアニメーションは実行されなくなります。
    }
    // 動きがない場合は、背後で新しいアニメーションの実行を継続します // 安全のため、stop(true) と組み合わせて使用​​されることもあります $(this).children().stop(true).slideup(during);

})