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

Heim

Web-Frontend

js-Tutorial

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

高洛峰

Dec 28, 2016 am 10:45 AM

jquery animate

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  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / 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  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / 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  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="Verwenden Sie die Animationsfunktion animate von jQuery, um den Erbsenstarteffekt zu erzielen" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / 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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7677

CakePHP-Tutorial

1393

C#-Tutorial

1207

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

Related knowledge

Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Apr 04, 2025 pm 02:42 PM

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Wer bekommt mehr Python oder JavaScript bezahlt? Apr 04, 2025 am 12:09 AM

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Entmystifizieren JavaScript: Was es tut und warum es wichtig ist Apr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt? Apr 04, 2025 pm 05:09 PM

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen? oder: Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird? Apr 04, 2025 pm 05:36 PM

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

Ist JavaScript schwer zu lernen? Apr 03, 2025 am 12:20 AM

JavaScript zu lernen ist nicht schwierig, aber es ist schwierig. 1) Verstehen Sie grundlegende Konzepte wie Variablen, Datentypen, Funktionen usw. 2) Beherrschen Sie die asynchrone Programmierung und implementieren Sie sie durch Ereignisschleifen. 3) Verwenden Sie DOM -Operationen und versprechen Sie, asynchrone Anfragen zu bearbeiten. 4) Vermeiden Sie häufige Fehler und verwenden Sie Debugging -Techniken. 5) Die Leistung optimieren und Best Practices befolgen.

So implementieren Sie die Funktion des Ziell- und Drop-Einstellungsfunktion, ähnlich wie bei VSCODE in der Front-End-Entwicklung? Apr 04, 2025 pm 02:06 PM

Erforschen Sie die Implementierung der Funktion des Bedien- und Drop-Einstellungsfunktion der Panel ähnlich wie VSCODE im Front-End. In der Front-End-Entwicklung wird VSCODE ähnlich wie VSCODE implementiert ...

Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe? Apr 04, 2025 pm 05:12 PM

Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...

See all articles