Detaillierte Erläuterung der Animationsmethode „Animate“ von jQuery und der Lösung für das Problem der Animationswarteschlange

 <Stil>
       *{
                Rand: 0;
                Polsterung: 0;
            }
            P{
                Position: relativ;
                links: 0;
                Rand unten: 10px;
                Hintergrundfarbe: himmelblau;
                Breite: 50px;
                Höhe: 50px;
            }
        </Stil>
    <!----------------------------------------->
    <Text>
        <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>
     <Skript>
            var $ps = $("p");
            //Im tatsächlichen Betrieb ist es besser, die flüchtige Zeit in einer Variablen zu speichern. var during = 1000;
            //Alle Attributwerte mit numerischen Werten können verschoben werden $ps.click(function(){
                $(this).animate({"width":500,"opacity":0.5},während,"swing")
            })
        </Skript>
    </body>

<Stil>
  div{
       Breite: 100px;
       Höhe: 100px;
       Rand: 8px durchgezogen #ccc;
       Position: absolut;
       links: 0;
       oben: 0;
       Hintergrund: URL (../../imgs/1.jpg) keine Wiederholung Mitte Mitte;
     }
.box2{
      Randradius: 50 %;
      Überlauf: versteckt;
       }
div Spanne {
       Position: absolut;
       links: 0;
       oben: 0;
       Breite: 100 %;
       Höhe: 100%;
       Hintergrundfarbe: rgba(221, 130, 130, 0,4);
     }
</Stil>
  <!-------------css-Stil------------------->
<Text>
  <div Klasse="Box1"><span></span></div>
  <div Klasse="box2"><span></span></div>
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<Skript>
 var $box1 = $(".box1");
 var $box2 = $(".box2");
 var während = 2000;
 //Vergleich der Animationswarteschlangen $box2.animate({"left": 400,"top":400},during)
 //Box1 und Box2 führen jeweils ihre eigenen Animationen aus //Mehrere Animationen für dasselbe Element in die Warteschlange stellen $box1.animate({"left": 400},during) //$box1.animate({"top": 400}, during) in die Warteschlange stellen
 // Der untere Teil der Animation ist ein Timer, der asynchron geladen wird // Nicht-Bewegungscode, ungefähr das gleiche Elementobjekt, wird nicht in die Warteschlange gestellt // $box1.css ("Höhe", 200)
 </Skript>
</body>

//Andere Bewegungsmethoden werden, wenn sie auf dasselbe Element eingestellt sind, ebenfalls in die Warteschlange gestellt$box2.mouseenter(function(){
      $(diese).children().slideUp(während)
  })
  $box2.mouseleave(Funktion(){
      $(diese).children().slideDown(während)
  })
  //Die Maus bewegt sich schnell auf und ab, und dann gleitet der graue Bereich von Box2 weiter hinein und heraus, bis alle Zeiten ausgeführt wurden

//Mehrere Bewegungen desselben Elements können durch Kettenaufrufe vereinfacht werden //Sie müssen aber trotzdem in die Warteschlange gestellt werden $box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

   //Verzögerung $box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

<Stil>
 div {
      Breite: 100px;
      Höhe: 100px;
      Rand: 8px durchgezogen #ccc;
      Position: absolut;
      links: 0;
      oben: 40;
      Hintergrund: URL (../../imgs/1.jpg) keine Wiederholung Mitte Mitte;
   }  
 div Spanne {
      Position: absolut;
      links: 0;
      oben: 0;
      Breite: 100 %;
      Höhe: 100%;
      Hintergrundfarbe: rgba(221, 130, 130, 0,4);
    }
 </Stil>
</Kopf>
  
<Text>
 <Eingabetyp="Schaltfläche" Wert="true true" ID="btn1">
 <Eingabetyp="Schaltfläche" Wert="true false" id="btn2">
 <Eingabetyp="Schaltfläche" Wert="false false" ID="btn3">
 <Eingabetyp="Schaltfläche" Wert="falsch wahr" ID="btn4"><br>
  
 <div Klasse="Box1"><span></span></div>
  
  
<script src="../jq/jquery-1.12.4.min.js"></script>
<Skript>
   var $box1 = $(".box1");
  
   var während = 2000;
  
   //Mehrere Animationen für dasselbe Element in die Warteschlange stellen $box1.animate({ "left": 400 }, during)
   $box1.animate({ "top": 400 }, während)
   $box1.animate({"links":0},während)
   $box1.animate({"top":40},während)
 
  // Animation stoppen // Schaltflächenklickereignis hinzufügen var $btn1 = $("#btn1")
  var $btn2 = $("#btn2")
  var $btn3 = $("#btn3")
  var $btn4 = $("#btn4")
  
  //true true Löscht die in die Warteschlange gestellten Animationen und beendet die aktuelle Animation sofort. Stoppt an der Endposition$btn1.click(function () {
       $box1.stop(wahr, wahr);
  })
  //true false Animation löschen und an der aktuellen Stelle anhalten $btn2.click(function () {
     $box1.stop(wahr, falsch);
  })
  //false false Lösche die folgenden Animationen nicht, halte bei der aktuellen // an und führe dann die nächste Animation aus $btn3.click(function () {
     $box1.stop(falsch, falsch);
  })
  //false true Lösche die folgende Animation nicht, die aktuelle Bewegung wird sofort beendet$btn4.click(function () {
       $box1.stop(falsch, wahr);
  })
 </Skript>
</body>

<Stil>
 div {
     Breite: 100px;
     Höhe: 100px;
     Rand: 8px durchgezogen #ccc;
     Position: absolut;
     links: 0;
     oben: 0;
     Hintergrund: URL (../../imgs/1.jpg) keine Wiederholung Mitte Mitte;
   } 
div Spanne {
     Position: absolut;
     links: 0;
     oben: 0;
     Breite: 100 %;
     Höhe: 100%;
     Hintergrundfarbe: rgba(221, 130, 130, 0,4);
  }
  </Stil>
<Text>
  <Eingabetyp="Schaltfläche" Wert="true true" ID="btn1">
  <Eingabetyp="Schaltfläche" Wert="true false" id="btn2">
  <Eingabetyp="Schaltfläche" Wert="false false" ID="btn3">
  <Eingabetyp="Schaltfläche" Wert="falsch wahr" ID="btn4"><br>

  <div Klasse="Box1"><span></span></div>

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

     var während = 2000;
    // Animation löschen $box1.mouseenter(function(){
        $(diese).children().stop(true).slideUp(während)
    })

   $box1.mouseleave(Funktion(){
       $(diese).children().stop(true).slideDown(während)
   })
    </Skript>
</body>

//Funktionsdrosselungsmethode $box1.mouseenter(function(){
    wenn(ist(":animiert")){
        //Wenn beurteilt wird, dass es sich bewegt, kehren Sie direkt zurück und führen Sie keine weiteren Animationsrückläufe mehr aus.
    }
    //Wenn keine Bewegung stattfindet, führen Sie die folgende neue Animation weiter aus: $(this).children().slideup(during);

})

$box1.mouseenter(Funktion(){
    wenn(ist(":animiert")){
        //Wenn beurteilt wird, dass es sich bewegt, kehren Sie direkt zurück und führen Sie keine weiteren Animationsrückläufe mehr aus.
    }
    //Wenn keine Bewegung stattfindet, führen Sie die neue Animation dahinter weiter aus. //Manchmal wird es aus Sicherheitsgründen in Verbindung mit stop(true) verwendet. $(this).children().stop(true).slideup(during);

})