Explication détaillée de l'animation jQuery et des effets spéciaux

jquery Ce que nous devons le plus utiliser, ce n'est pas seulement l'asynchrone, mais aussi l'animation et les effets spéciaux. Si nous voulons offrir aux utilisateurs une meilleure expérience, jquery est le meilleur choix, Jetons un coup d'œil à l'explication détaillée de l'animation et des effets spéciaux de jquery !

1. Afficher et masquer hide() et show()

Pour l'animation, afficher et masquer sont les éléments les plus basiques. des effets, cette section présente brièvement l'affichage et le masquage de jQuery.

<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>

Ce qui précède est un test des fonctions hide() et show().

2. Utilisez les méthodes show(), hide() et toggle()

L'exemple précédent utilise show() et toggle() La méthode hide() a été brièvement présentée. En fait, ces deux méthodes peuvent accepter des paramètres pour contrôler le processus d'affichage et de masquage.
La syntaxe est la suivante

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

Parmi elles, la durée représente la durée d'exécution de l'animation, qui peut être une chaîne représentant la vitesse, notamment lente, normale, rapide. Elle peut également être un entier. représentant le temps (millisecondes). le rappel est une fonction de rappel facultative. Exécuté une fois l'animation terminée.

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

L'exemple est le même que le premier exemple, sauf que les paramètres temporels sont ajoutés à hide() et show(). En fait, Toogle() peut également ajouter des paramètres d'événement.

3. Utilisez les méthodes fadeIn() et fadeOut()

Pour que les effets d'animation s'affichent et disparaissent, jQuery fournit également fadeIn. ( ) fadeOut sont deux méthodes pratiques. Leurs effets d'animation sont similaires au fondu et leur syntaxe est exactement la même que celle de slow() et hide().

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

Exemple

<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">

Utilisation de la méthode fadeTo(). La méthode

fadeTo() modifie progressivement l'opacité de l'élément sélectionné à la valeur spécifiée.

Exemple :

<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">

Paramètres liés au fadeOut

vitesse
Facultatif. Spécifie la vitesse à laquelle un élément passe de la transparence actuelle à la transparence spécifiée.

Valeurs possibles :

millisecondes (par exemple 1500)
"lent"
"normal"
"rapide"
opacité Obligatoire. Spécifie la transparence à appliquer en fondu entrant ou sortant. Doit être un nombre compris entre 0,00 et 1,00.
rappel
Facultatif. Fonction à exécuter après l'exécution de la fonction fadeTo.

Pour en savoir plus sur les rappels, visitez notre chapitre jQuery Callback.

Ce paramètre ne peut être défini que si le paramètre de vitesse est défini.

4. Effets Slide slideUp et slideDown

<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">

mentionnés plus tôt Plusieurs animations effets, jQuery fournit également slideUp() et slideDown() pour simuler un effet de rideau de type diapositive dans PPT, ce qui est exactement le même que slow() et hide().

Le code ci-dessus définit un div et un img, qui sont combinés à l'aide de la méthode add.

5. Animation personnalisée

Compte tenu de la polyvalence du framework et de la taille du fichier de code, jQuery ne peut pas couvrir tous les effets d'animation, mais Il fournit la méthode animate(), qui permet aux développeurs de personnaliser les animations. Cette section présente principalement les deux formes et applications de la méthode animate().

La méthode animate() laisse beaucoup de place aux développeurs. Il se présente sous deux formes. La première forme est plus couramment utilisée. L'utilisation est la suivante

animate(params,[duration],[easing],[callback])
où params est la liste des propriétés CSS que vous souhaitez modifier et la valeur finale souhaitée changer, et la durée est facultative, ce qui a exactement la même signification que les paramètres de show()/hide(). L'assouplissement est un paramètre facultatif, généralement utilisé par les plug-ins d'animation. Utilisé pour contrôler le processus de changement de rythme. jQuery ne fournit que deux valeurs : linéaire et swing callback est une fonction de rappel facultative. Se déclenche une fois l'animation terminée.

Il faut faire attention. Les variables dans les paramètres suivent la méthode de dénomination des chameaux. Par exemple, paddingLeft ne peut pas être écrit comme padding-left De plus, les paramètres ne peuvent être que des attributs représentés par des valeurs numériques en CSS. Par exemple, les attributs tels que width.top.opacity et

comme backgroundColor ne sont pas pris en charge par animate.

<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>

Dans les paramètres, jQuery peut également utiliser "+=" ou "-=" pour indiquer des changements relatifs. Par exemple,

<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>

effectuez d'abord un positionnement absolu du div, puis utilisez -= et += dans animate() pour obtenir des décalages relatifs respectivement vers la gauche et la droite.

La méthode animate() a une autre forme, comme indiqué ci-dessous :

animate(params,options)
Parmi eux, params est exactement le même que la première forme, et options est animation. Liste de paramètres facultatifs, comprenant principalement la durée, l'esaing, le rappel, la file d'attente, etc., parmi lesquels duration.easing.callback est exactement le même que la première forme, queue est une valeur booléenne, indiquant que lorsqu'il y a plusieurs animate() formant jQuery, l'animate() actuel Immédiatement après le prochain animate(), doit-il être exécuté en séquence (vrai) ou faux en même temps ?

L'exemple suivant montre la deuxième utilisation de 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动画

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!