Studiennotizen zu jquery-Animationseffekten (8 Effekte)

1. Elemente ein- und ausblenden

display:none; hide
Anzeige:Block; Anzeige

Einfaches Ein- und Ausblenden von Methoden

a) show() show
b) hide() hide
c) toggle()-Schalter, Anzeigen zum Ausblenden, Ausblenden zum Anzeigen

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").hide();//display:none
    //document.getElementById('id').style.display="none";
  }
  function f2(){
    //显示
    $("div").show();//display:block
  }
  function f3(){
    $("div").toggle();
  }
</script>
<style type="text/css">
   div {width:300px; height:200px; background-color:blue;}
</style>
 <body>
   <div>duck and dog</div>
   <input type="button" value="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
</body>

Nach dem Login kopieren

CSS unterstützt zwei Methoden zum Anzeigen und Ausblenden von Elementen, nämlich die Verwendung von Sichtbarkeits- oder Anzeigestilen. Sie haben den gleichen Effekt bei der Steuerung der Anzeige und Ausblendung von Elementen, die Ergebnisse sind jedoch unterschiedlich.
Die spezifischen Anweisungen lauten wie folgt:

Beim Ausblenden eines Elements speichert das Sichtbarkeitsattribut auch den Einfluss des Elements im Dokumentfluss, und das Unbekannte des Elements bleibt nach dem Ausblenden unverändert. Dieses Attribut enthält zwei Werte: sichtbar (Standard) und ausgeblendet.
Nachdem die Anzeige ausgeblendet wurde, nehmen die ausgeblendeten Elemente nicht mehr die Position des Dokuments ein.

2. Schiebeeffekt ein- und ausblenden

slideUp(speed[,callback]) verschiebt das Element nach oben und verbirgt es schließlich
slideDown(speed[,callback]) verschiebt das Element nach unten und zeigt schließlich
slideToggle(speed[,callback])

Geschwindigkeit: Stellen Sie die Geschwindigkeit des Effekts ein (langsam (600), normal (400), schnell (200) Zeit (Millisekunden))
Rückruf: Rückruffunktion, die automatisch aufgerufen wird, nachdem der Effekt ausgeführt wurde

<script type="text/javascript">
  function f1(){
    //隐藏
    $("div").slideUp(3000,function(){
      alert('我消失了，你能看到么');
    });
  }
  function f2(){
    //显示
    $("div").slideDown(3000,function(){
      alert('我又回来了');
    });//display:block
  }
  function f3(){
    $("div").slideToggle(1000);
  }
  $(function(){
    //气缸滑动效果
    //setInterval("f3()",1000);
  });
</script>

<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>


<body>
   <div>duck and dog</div>
   <input type="button" value="隐藏" onclick="f1()" />
   <input type="button" value="显示" onclick="f2()" />
   <input type="button" value="开关效果" onclick="f3()" />
 </body>

Nach dem Login kopieren

3. Fade-Effekt

Elemente durch bestimmte Transparenzänderungen ein- und ausblenden lassen

fadeIn(speed, [callback])
fadeOut(speed, [callback])
fadeToggle(speed, [callback])-Schaltereffekt
fadeTo(speed, opacity, [callback]) setzt das Div auf eine bestimmte Transparenz (0-1) 0,3 ist 30 % Transparenz

<script type="text/javascript"> 
  function f1(){
    //隐藏
    $("div").fadeOut(4000);
  }
  function f2(){
    //显示
    $("div").fadeIn(4000);
    $("#two").fadeTo(2000,0.3);
  }

  function f3(){
    $("div").fadeToggle(2000);
  }

</script>
<style type="text/css">
  div {width:300px; height:200px; background-color:blue;}
</style>
<body>
  <div id = "two">duck and dog</div>

  <input type="button" value="隐藏" onclick="f1()" />
  <input type="button" value="显示" onclick="f2()" />
  <input type="button" value="开关效果" onclick="f3()" />
</body>

Nach dem Login kopieren

Transparenz einstellen, die Transparenz von div beträgt 30 %:

4. Die zugrunde liegende Methode des Animationseffekts animate()

show() hide() und andere Animationseffekte führen intern die animate()-Methode aus

$().animate(css效果参数[，时间][，回调函数]);

Nach dem Login kopieren

Allgemeine JQuery-Methoden wie css() geben nach der Ausführung das aktuelle JQuery-Objekt zurück, sodass viele JQuery-Methoden in einer Kette aufgerufen werden können.

 <script type="text/javascript">
  function f1(){
    //文字大小、文字粗体、div本身宽度和高度
    //font-size background-color color

    console.log($("div"));
    //jquery对象调用完毕css方法本身还是一个jquery对象
    //说明css方法执行完毕有return this关键字
    console.log($("div").css('font-weight','bold').css("background-color",'pink')); 

    var jn = {'font-size':'30px',width:'400px',height:'300px'};
    $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);

    //$("div").animate(jn,2000);
  }

</script>

<style type="text/css">
  div {width:300px; height:200px; background-color:blue; }
</style>

<body>
  <div>duck and dog</div>
  <input type="button" value="设置" onclick="f1()" />
</body>

Nach dem Login kopieren

5. Akkumulations- und Subtraktionsanimation

Wenn die Animation auf links eingestellt ist: 500 auf einmal, wird der erste Klick auf das Div 500 Pixel nach links verschoben, und der zweite Klick bewegt sich nicht. Akkumulation, Akkumulation und Subtraktion sind kontinuierliche Bewegungen. Ändern Sie einfach links: „500px“ in links: „=500px“ oder links: „-=500px“.

(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "+=500px"}, 3000); 
  }) 
})</span>

Nach dem Login kopieren

6. Mehrere Animationen

1. Führen Sie mehrere Animationen gleichzeitig aus
Das obige Beispiel steuert nur die Änderung des linken Attributs. Wenn wir dieses Mal das linke Attribut steuern, steuern wir auch die Höhe des Elements auf 200 Pixel

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px",height:"200px"}, 3000); 
  }) 
})

Nach dem Login kopieren

2. Animationen nacheinander ausführen

Im obigen Beispiel werden die beiden Animationen, das Element nach rechts zu verschieben und die Höhe zu vergrößern, gleichzeitig ausgeführt. Jetzt müssen wir uns zuerst nach rechts bewegen und dann die Höhe vergrößern. Wir müssen nur die obige animate()-Methode aufteilen und in zwei Teile schreiben

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px"},3000) 
       .animate({height:"200px"},1000); 
  }) 
})

Nach dem Login kopieren

3. Umfassende Animation

Als nächstes werden komplexere Animationen erstellt. Klicken Sie auf das div-Element, um es nach rechts zu verschieben, seine Höhe zu erhöhen und seine Deckkraft von 50 % auf 100 % zu ändern. Lassen Sie es dann von oben nach unten wandern, während seine Breite größer wird. Wenn dies abgeschlossen ist
Nach einigen Effekten wird es durch Ausblenden ausgeblendet.

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000) 
       .fadeOut(1000); 
  }) 
})

Nach dem Login kopieren

7. Animationsrückruffunktion

Im obigen Beispiel, wenn Sie den CSS-Stil ändern möchten, anstatt das Element im letzten Schritt auszublenden. Jetzt können wir die dritte Parameter-Callback-Funktion von animate

verwenden

$(function(){ 
  $("#panel").css("opacity",0.5);//设置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")}); 

  }) 
})

Nach dem Login kopieren

Dadurch wird die CSS-Methode zur Animationswarteschlange hinzugefügt.

8. Stoppen Sie die Animation und stellen Sie fest, ob sie sich im Animationsstatus befindet

1. Stoppen Sie die Animation des Elements

stop([clearQueue][,gotoEnd]) Beides sind optionale Parameter, beide vom Typ boolean
Parameterbeschreibung:

clearQueue: Gibt an, ob die unvollendete Animationswarteschlange gelöscht werden soll
gotoEnd: gibt an, ob zum Endzustand der ausgeführten Animation gesprungen werden soll
Sie können diese beiden Parameter der stop()-Methode anhand eines umfassenden Beispiels verstehen:

<style type="text/css"> 
  *{margin:0;padding:0;}  
  body { font-size: 13px; line-height: 130%; padding: 60px } 
  #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} 
  .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;} 
  .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;} 
</style> 
<script src="../../../scripts/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
  $(function(){ 
     $("button:eq(0)").click(function () { 
       $("#panel") 
        .animate({height : "150" } , 2000 ) 
        .animate({width : "300" } , 2000 ) 
        .hide(3000) 
        .animate({height : "show" , width : "show" , opacity : "show" } , 2000 ) 
        .animate({height : "500"} , 2000 ); 
     }); 
     $("button:eq(1)").click(function () { 
       $("#panel").stop();//停止当前动画，继续下一个动画 
     }); 
     $("button:eq(2)").click(function () { 
       $("#panel").stop(true);//清除元素的所有动画 
     }); 
     $("button:eq(3)").click(function () { 
       $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画 
     }); 
     $("button:eq(4)").click(function () { 
       $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态  
     }); 

  }) 
</script> 

<body> 
  <button>开始一连串动画</button> 
  <button>stop()</button> 
  <button>stop(true)</button> 
  <button>stop(false,true)</button> 
  <button>stop(true,true)</button> 
  <div id="panel"> 
    <h5 class="head">三国杀杀天下</h5> 
    <div class="content"> 
      夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情 
    </div> 
  </div> 
</body> 
</html>

Nach dem Login kopieren

2. Bestimmen Sie, ob sich das Element im animierten Zustand befindet

Vermeiden Sie bei Verwendung der animate()-Methode Inkonsistenzen zwischen Animation und Benutzerverhalten, die durch die Anhäufung von Animationen verursacht werden. Eine Animationsakkumulation tritt auf, wenn der Benutzer schnell eine animate()-Animation für ein Element ausführt.

Die Lösung besteht darin, festzustellen, ob sich das Element im Animationsstatus befindet, und dem Element nur dann eine neue Animation hinzuzufügen, wenn es sich nicht im Animationsstatus befindet.
Verwendung:

if(!$(element).is(":animated")){ 
  //添加新的动画 
}

Nach dem Login kopieren

Durch die detaillierte Analyse von 8 JQuery-Animationseffekten können Sie mit JQuery-Animationseffekten experimentieren. Ich hoffe, dass Ihnen dieser Artikel gefällt, der eine umfassende Einführung in JQuery-Animationseffekte bietet.

Studiennotizen zu jquery-Animationseffekten (8 Effekte)_jquery