Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen-js-Tutorial-php.cn

Peashooter, Lawn und Bullets sind alles vorgefertigte Bilder,

1. Ist jQuery eine Bibliothek oder ein Framework?

jQuery ist derzeit eher die beliebteste js-Bibliothek als ein Framework.

Ich habe auf Zhihu schon einmal jemanden sagen sehen:

Du rufst Bibliothek an.

Ich denke schon, die wörtliche Bedeutung ist wahrscheinlich, dass du Klassenbibliotheken kannst ohne Einschränkungen verwendet werden, ein Framework muss jedoch unter verschiedenen Einschränkungen verwendet werden.

Ich persönlich denke, dass die js-Bibliothek auf eine API verweist, die direkt mit Dokumentelementen interagiert. Sie können direkt auf die Bibliothek verweisen und sich von ihr bedienen lassen. Das Framework ist auf die Architekturebene ausgerichtet. Wenn Sie das Framework verwenden möchten, müssen Sie dessen Regeln befolgen. Angular.js stellt Ihnen beispielsweise Methoden zur Verfügung und schränkt gleichzeitig die DOM-Dokumentstruktur ein.

Nehmen Sie die drei Hauptframeworks von Java. Wenn Sie Spring verwenden möchten, müssen Sie den Schritten folgen. Sie müssen nur hineingehen und es dekorieren. Die Bibliothek ähnelt in gewisser Weise StringUtils, Sie müssen sich um nichts anderes kümmern. Sie können sie einfach direkt aufrufen.

2. Die Animationsfunktion von jQuery

Die Funktion animate() wird verwendet, um eine benutzerdefinierte Animation basierend auf CSS-Attributen auszuführen

Grundlegende Verwendung:

$(&#39;#id&#39;).animate(css,time,callback);

Nach dem Login kopieren

CSS: Liste der Stile, die Sie endlich implementieren müssen

Zeit: Übergangszeit

Rückruf: Rückruffunktion

Die Hauptfunktion der Animationsfunktion besteht darin, einige Übergangseffekte im CSS-Stil zu erzielen.

3. Stellen Sie jQuery vor

Zum Beispiel habe ich jetzt eine Div-Box.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
   #box {
    width: 300px;
    height: 300px;
    background:greenyellow;
   }
  </style>
 </head>
 <body>
  <div id=&#39;box&#39;></div>
 </body>
 
 <script>
 
 </script>
 
</html>

Nach dem Login kopieren

Im obigen Code haben wir die von Baidu bereitgestellte jQuery-Datei eingeführt.

Wie lässt sich also schnell feststellen, ob die Einführung erfolgreich ist? Folgende Methoden stehen zur Verfügung:

1.console.log($);

Effekt:

Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen

Dies zeigt, dass die Einführung erfolgreich war.

2. Verwenden Sie direkt den Browser, um zu überprüfen

Öffnen Sie Ihre Seite, drücken Sie F12 und eine Konsole wie diese wird angezeigt. Dies ist, was der Browser enthält (ich verwende Google Chrom).

Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen

Geben Sie $ ein

Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen

Geben Sie ein!

Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen

Hey, ist das okay?

4. Onmouseover-Ereignis

Fügen wir dem Div-Feld ein Mouseover-Ereignis hinzu.

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 alert();
});

Nach dem Login kopieren

Kreuz es:

Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen

Nun, das zeigt zumindest, dass unser Code bisher korrekt ist, das hat mir gefallen Als ich js zum ersten Mal lernte, hatte ich das Gefühl, dass jede Codezeile mit Zuversicht geschrieben wurde.

5. Verwenden Sie die Animationsfunktion, um die Breite und Höhe der Box zu ändern

Wir entfernen die Warnung und fügen den folgenden Code hinzu:

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500);
});

Nach dem Login kopieren

Dies Das bedeutet, dass beim Zeichnen mit der Maus die Breite auf 600 Pixel geändert wird und die Übergangszeit 500 Millisekunden beträgt.

Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen

Was wäre, wenn wir nach der Verdoppelung der Breite die Höhe verdoppeln möchten?

Verwenden Sie übrigens die Rückruffunktion. Wenn die erste Animation abgeschlossen ist, fahren Sie mit der Ausführung der nächsten Animation fort:

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500,function(){
  $(&#39;#box&#39;).animate({height:600},500);
 });
});

Nach dem Login kopieren

Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen

Das ist es A Sequenz.

In diesem Artikel wird kurz die Verwendung der jQuery-Animationsfunktion vorgestellt.

6. Anhang

Zuletzt wird zusätzlich zur Animate-Funktion auch die js-Timer-SetInterval-Methode verwendet:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <style type="text/css">
   body {
    background: url(background1.jpg) no-repeat;
    position: fixed;
   }
   ul li {
    list-style: none;
   }
   .wrap {
    position: relative;
    left: 170px;
    top: 65px;
   }
   .plants1 {
    display: inline-block;
    position: relative;
    left:35px;
   }
   .plants1 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants1 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
 
   .plants2 {
    display: inline-block;
    position: relative;
    left:2px;
   }
   .plants2 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants2 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
 
   .plants3 {
    display: inline-block;
    position: relative;
    left:-40px;
   }
   .plants3 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants3 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
  </style>
 </head>
 <body>
  <div class=&#39;wrap&#39;>
   <ul class=&#39;plants1&#39;>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
 
   </ul>
 
   <ul class=&#39;plants2&#39;>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
 
   </ul>
 
   <ul class=&#39;plants3&#39;>
 
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
   </ul>
  </div>
 </body>
 
 <script type="text/javascript">
 
  function randomNum(num){
   return Math.floor(Math.random()*(num+1));
  };
 
  setInterval(function(){
   var $this = $(&#39;.PB00&#39;).eq(randomNum(17));
   $this.animate({&#39;margin-left&#39; : 1000},2000,function(){
    $this.css({&#39;margin-left&#39; : 0});
   });
  },10);
 
 </script> 
 
</html>

Nach dem Login kopieren

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium und die Arbeit aller hilfreich sein wird. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung der chinesischen PHP-Website.

Weitere verwandte Artikel, die die Animationsfunktion von jQuery verwenden, um den Erbsen-Starteffekt zu erzielen, finden Sie auf der chinesischen PHP-Website!