Detaillierte Erläuterung der jQuery-Animation und der Spezialeffekte_jquery

1. hide() und show() ein- und ausblenden

Bei Animationen gehören das Ein- und Ausblenden zu den grundlegendsten Effekten. In diesem Abschnitt wird das Ein- und Ausblenden von jQuery kurz vorgestellt.

Code kopieren Der Code lautet wie folgt:

2. Verwenden Sie die Methoden show(), hide() und toggle()

Im vorherigen Beispiel wurden die Methoden show() und hide() kurz vorgestellt. Tatsächlich können diese beiden Methoden Parameter akzeptieren, um den Anzeige- und Ausblendvorgang zu steuern.
Die Syntax lautet wie folgt

show(duration,[callback]);
hide(Dauer,[Rückruf]);

Unter ihnen stellt die Dauer die Länge der Animationsausführungszeit dar, die eine Zeichenfolge sein kann, die die Geschwindigkeit angibt, einschließlich langsam, normal und schnell. Es kann auch eine ganze Zahl sein, die die Zeit (Millisekunden) darstellt. Callback ist eine optionale Callback-Funktion. Wird ausgeführt, nachdem die Animation abgeschlossen ist.

Code kopieren Der Code lautet wie folgt:

                $(function() {

                     $("input:first").click(function() {
                            $("p").hide(300 //Hide
                });
                     $("input:last").click(function() {
                          $("p").show(500 //Show
                });
            });
                                                                                     


Das Beispiel ist das gleiche wie das erste Beispiel, außer dass Zeitparameter zu hide() und show() hinzugefügt werden. Tatsächlich kann toogle() auch Ereignisparameter hinzufügen.

2. Verwenden Sie die Methoden fadeIn() und fadeOut()

Für Animationseffekte bietet jQuery außerdem zwei praktische Methoden: fadeIn() und fadeOut. Ihre Animationseffekte ähneln dem Fading und ihre Syntax ist genau die gleiche wie slow() und hide().
fadeIn(duration, [callback]);

               fadeOut(duration, [callback]);

Beispiel

Code kopieren

Der Code lautet wie folgt:

         ">           
          

Verwendung der fadeTo()-Methode. Die Methode

fadeTo() ändert die Deckkraft des ausgewählten Elements schrittweise auf den angegebenen Wert.

Beispiel:

Code kopieren Der Code lautet wie folgt:

fadeOut-bezogene Parameter

Geschwindigkeit Optional. Gibt die Geschwindigkeit an, mit der ein Element von der aktuellen Transparenz zur angegebenen Transparenz wechselt.

Mögliche Werte:

Millisekunden (z. B. 1500)

„langsam“

„normal“

„schnell“
Deckkraft erforderlich. Gibt die Transparenz an, die ein- oder ausgeblendet werden soll. Muss eine Zahl zwischen 0,00 und 1,00 sein.
Rückruf
Optional. Die Funktion, die ausgeführt werden soll, nachdem die fadeTo-Funktion ausgeführt wurde.

Um mehr über Rückrufe zu erfahren, besuchen Sie unser Kapitel zu jQuery-Rückrufen.

Dieser Parameter kann nur eingestellt werden, wenn der Geschwindigkeitsparameter eingestellt ist.

3. SlideUp- und SlideDown-Effekte

Code kopieren Der Code lautet wie folgt:

 
   
   
   
   

   

Sie können die jQuery-App mit slideUp() und slideDown() verwenden, um PPT-Dateien zu erstellen low() und hide() werden verwendet.

以上代码定义了一个div和一个img,用add方法组合在一起.

4.自定义动画

考虑到框架的通用性及代码文件的大小, jQuery不能涵盖所有的动画效果, 但它提供了animate()方法,能够使开发者自定义动画.Sie können auch animate() verwenden两种形式及应用.

animate()方法给开发者很大的空间。它一共有两种形式。第一种形式比较常用。用法如下

animate(params,[duration],[easing],[callback])
其中params为希望进行变幻的css属性列表, 以及希望变化到的最终值, duration为可选项, 与show()/hide()的参含义完全相同.Easing为可选参数,通常供动画插件使用.用来来制节奏的变化过程.jQuery中只提供了linear和swing两个值.callback为可选的回调函数。在动画完成后触发。

示的属性。例如width.top.opacity等

像backgroundColor这样的属性不被animate支持.

复制代码 代码如下:

            div {
                Hintergrundfarbe: #FFFF00;
                Höhe: 40px;
                Breite: 80px;
                Rand: 1 Pixel durchgehend #000000;
                Rand oben: 5px;
                Polsterung: 5px;
                text-align: center;
            }
       
       
        Los>>
       

动画！

在params中，jQuery还可以用“ =”或者"-="来表示相对变化。如

复制代码 代码如下:

            div {
                Hintergrundfarbe: #FFFF00;
                Höhe: 40px;
                Breite: 80px;
                Rand: 1 Pixel durchgehend #000000;
                Rand oben: 5px;
                Polsterung: 5px;
                text-align: center;
                Position: absolut;
            }
       
       
        Los>>
        Los>>
       

动画！

先将div进行绝对定位，然后使用animate()中的-=和 =分别实现相对左移和相对右移。

animate()方法还有另外一种形式，如下所示：

anime(params,options)
Mit Parametern, Optionen und Duration, Esaing, Callback, Queue und Duration.easing.Callback一种形式完全一样，queue为布尔值，表示Sie können animate() von jQuery verwenden, Sie können animate() verwenden, um animate() zu verwenden, und Sie können animate() verwenden, um die Funktion (true) und false

zu verwenden

Sie können auch animate() verwenden.

复制代码 代码如下:

          div {
                   Hintergrundfarbe: #FFFF22;
                       Breite: 100 Pixel;
                    text-align: center;
Rand: 2 Pixel durchgehend #000000;
                   Rand: 3px;
              Schriftgröße: 13px;
                 Schriftfamilie: Arial, Helvetica, serifenlos;
            }
Eingabe {
Rand: 1 Pixel durchgehend #000033;
            }
                                                                                           
       
       
       
       
       

Block1

       

Block2

以上两个div块同时运用了三个动画效果，其中第一个div快的第一个动画添加了queue:false参数，使得前两项两个动画同时执行。可以通过重置反复测试，熟悉animate()第二种形式。

以上就是本文的全部内容了，希望大家能够喜欢。