Detaillierte Erläuterung der jQuery-Animation und Spezialeffekte

jquery Was wir am häufigsten verwenden müssen, ist nicht nur asynchron, sondern auch Animationen und Spezialeffekte. Wenn wir Benutzern ein besseres Erlebnis bieten möchten, ist jquery die beste Wahl. Werfen wir einen Blick auf die detaillierte Erklärung der Animationen und Spezialeffekte von jquery!

1. Ein- und Ausblenden von hide() und show()

Für Animationen sind Ein- und Ausblenden die grundlegendsten In Bezug auf die Auswirkungen wird in diesem Abschnitt kurz das Anzeigen und Ausblenden von jQuery vorgestellt.

<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(); //显示
                });
            });
        </script>
        <input type="button" value="Hide">
        <input type="button" value="Show">
        <p>点击按钮，看看效果</p>
        <div><em>本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍jQuery的显示和隐藏。</em>
        </div>

Das Obige ist ein Test der Funktionen hide() und show().

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

Das vorherige Beispiel verwendet show() und toggle() Die Methode hide() wurde kurz vorgestellt. Tatsächlich können diese beiden Methoden Parameter zur Steuerung des Anzeige- und Ausblendvorgangs akzeptieren.
Die Syntax lautet wie folgt:

show(duration,[callback]);
hide(duration,[callback]);

Darunter stellt die Dauer die Länge der Animationsausführungszeit dar, die eine Zeichenfolge sein kann, die die Geschwindigkeit angibt, einschließlich langsam, normal, schnell. Es kann auch eine ganze Zahl sein Darstellung der Zeit (Millisekunden). Rückruf ist eine optionale Rückruffunktion . Wird ausgeführt, nachdem die Animation abgeschlossen ist.

<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(300); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(500); //显示
                });
            });
        </script>

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.

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

Damit Animationseffekte angezeigt und ausgeblendet werden können, bietet jQuery auch fadeIn ( ) fadeOut sind zwei praktische Methoden. Ihre Animationseffekte ähneln dem Fading und ihre Syntax ist genau die gleiche wie slow() und hide().

 fadeIn(duration, [callback]);
 fadeOut(duration, [callback]);

Beispiel

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeOut(3000); //逐渐fadeOut
                });
                $("input:eq(1)").click(function() {
                    $("img").fadeIn(1000); //逐渐fadeIn
                });
            });
        </script>
        <img src="/uploads/allimg/150204/225Q14038-0.jpg">
        <input type="button" value="Hide">
        <input type="button" value="Show">

Verwendung der fadeTo()-Methode. Die Methode

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

Beispiel:

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeOut(1000);
                });
                $("input:eq(1)").click(function() {
                    $("img").fadeIn(1000);
                });
                $("input:eq(2)").click(function() {
                    $("img").fadeTo(1000, 0.5);
                });
                $("input:eq(3)").click(function() {
                    $("img").fadeTo(1000, 0);
                });
            });
        </script>
            <p><img src="03.jpg"></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">

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.

4. SlideUp- und SlideDown-Effekte

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("div").add("img").slideUp(1000);
                });
                $("input:eq(1)").click(function() {
                    $("div").add("img").slideDown(1000);
                });
                $("input:eq(2)").click(function() {
                    $("div").add("img").hide(1000);
                });
                $("input:eq(3)").click(function() {
                    $("div").add("img").show(1000);
                });
            });
        </script>  
    <input type="button" value="SlideUp">
    <input type="button" value="SlideDown">
    <input type="button" value="Hide">
    <input type="button" value="Show"><br>
    <div></div><img src="04.jpg">

bereits erwähnt Mehrere Animationen Effekte bietet jQuery auch slideUp() und slideDown(), um einen rutschenähnlichen Vorhangeffekt in PPT zu simulieren, der genau das gleiche ist wie slow() und hide().

Der obige Code definiert ein div und ein img, die mithilfe der Add-Methode kombiniert werden.

5. Benutzerdefinierte Animation

Angesichts der Vielseitigkeit des Frameworks und der Größe der Codedatei kann jQuery nicht alle Animationseffekte abdecken, aber Es stellt die animate()-Methode bereit, mit der Entwickler Animationen anpassen können. In diesem Abschnitt werden hauptsächlich die beiden Formen und Anwendungen der animate()-Methode vorgestellt.

Die Methode animate() gibt Entwicklern viel Spielraum. Es gibt es in zwei Formen. Die erste Form wird häufiger verwendet. Die Verwendung ist wie folgt:

animate(params,[duration],[easing],[callback])
wobei params die Liste der CSS-Eigenschaften ist, die Sie ändern möchten, und der gewünschte Endwert zu ändern, und die Dauer ist optional, was genau die gleiche Bedeutung wie die Parameter von show()/hide() hat. Easing ist ein optionaler Parameter, der normalerweise von Animations-Plug-Ins verwendet wird. Wird zur Steuerung des Rhythmusänderungsprozesses verwendet. jQuery bietet nur zwei Werte: Linear und Swing ist eine optionale Callback-Funktion. Wird ausgelöst, nachdem die Animation abgeschlossen ist.

Muss aufpassen. Variablen in Parametern folgen der Camel-Benennungsmethode. Beispielsweise kann paddingLeft nicht als padding-left geschrieben werden. Darüber hinaus können Parameter nur durch numerische Werte in CSS dargestellt werden. Beispielsweise werden Attribute wie width.top.opacity und

wie backgroundColor von animate nicht unterstützt.

<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("button").click(function() {
                    $("#block").animate({
                        opacity: "0.5",
                        width: "80%",
                        height: "100px",
                        borderWidth: "5px",
                        fontSize: "30px",
                        marginTop: "40px",
                        marginLeft: "20px"
                    }, 2000);
                });
            });
        </script>
        <button id="go">Go>></button>
        <div id="block">动画！</div>

In Parametern kann jQuery auch „+=" oder „-=" verwenden, um relative Änderungen anzuzeigen. Führen Sie beispielsweise

<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("button:first").click(function() {
                    $("#block").animate({
                        left: "-=80px" //相对左移
                    }, 300);
                });
                $("button:last").click(function() {
                    $("#block").animate({
                        left: "+=80px" //相对右移
                    }, 300);
                });
            });
        </script>
        <button >Go>></button>
        <button >Go>></button>
        <div id="block">动画！</div>

zunächst eine absolute Positionierung des Div durch und verwenden Sie dann -= und += in animate(), um relative Links- bzw. Rechtsverschiebungen zu erreichen.

Die animate()-Methode hat eine andere Form, wie unten gezeigt:

animate(params,options)
Unter diesen ist params genau das gleiche wie die erste Form und options ist Animation. Optionale Parameterliste, hauptsächlich einschließlich Dauer, Esaing, Rückruf, Warteschlange usw., wobei Dauer.easing.callback genau das gleiche ist wie die erste Form, Warteschlange ist ein boolescher Wert, der angibt, dass bei mehreren animate() Bilden von jQuery, dem aktuellen animate() Sollte es unmittelbar nach dem nächsten animate() nacheinander (true) oder gleichzeitig false ausgeführt werden?

Das folgende Beispiel zeigt die zweite Verwendung von animate().

    <style>
            div {
                background-color: #FFFF22;
                width: 100px;
                text-align: center;
                border: 2px solid #000000;
                margin: 3px;
                font-size: 13px;
                font-family: Arial, Helvetica, sans-serif;
            }
            input {
                border: 1px solid #000033;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    //第一个animate与第二个animate同时执行，然后再执行第三个
                    $("#block1").animate({
                            width: "90%"
                        }, {
                            queue: false,
                            duration: 1500
                        })
                        .animate({
                            fontSize: "24px"
                        }, 1000)
                        .animate({
                            borderRightWidth: "20px"
                        }, 1000);
                });
                $("input:eq(1)").click(function() {
                    //依次执行三个animate
                    $("#block2").animate({
                            width: "90%"
                        }, 1500)
                        .animate({
                            fontSize: "24px"
                        }, 1000)
                        .animate({
                            borderRightWidth: "20px"
                        }, 1000);
                });
                $("input:eq(2)").click(function() {
                    $("input:eq(0)").click();
                    $("input:eq(1)").click();
                });
                $("input:eq(3)").click(function() {
                    //恢复默认设置
                    $("div").css({
                        width: "",
                        fontSize: "",
                        borderWidth: ""
                    });
                });
            });
        </script>
        <input type="button" id="go1" value="Block1动画">
        <input type="button" id="go2" value="Block2动画">
        <input type="button" id="go3" value="同时动画">
        <input type="button" id="go4" value="重置">
        <div id="block1">Block1</div>
        <div id="block2">Block2</div>

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

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

相关推荐：

Jquery中each的三种遍历方法

JQuery动画animate的stop方法使用详解

JavaScript强化教程――jQuery动画

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der jQuery-Animation und Spezialeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!