Quels effets spéciaux jQuery peut-il réaliser ? Utilisation des effets spéciaux jQuery (exemple de code)-js tutoriel-php.cn

Le contenu de cet article est de présenter quels types d'effets spéciaux jQuery peut réaliser ? Utilisation des effets spéciaux jQuery (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. [Tutoriels vidéo associés recommandés : Tutoriel jQuery]

1. Effet jQuery - Masquer et afficher

Utilisez les méthodes hide() et show() pour masquer et afficher les éléments HTML.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btnHide").click(function(){
                $("#myDiv1").hide();
                //语法格式：$(selector).hide(speed,callback);
                //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。

                // callback的使用如下，即第2个参数是一个函数，jQuery效果执行完会执行该函数。
                // $("#myDiv1").hide(3000,function(){
                //      alert("myDiv1隐藏了");
                // });
            });
            
            $("#btnShow").click(function(){
                $("#myDiv1").show();
                //语法格式：$(selector).show(speed,callback); 
                //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btnHide">隐藏</button>
    <button type="button" id="btnShow">显示</button>
    <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>
</body>
</html>

Copier après la connexion

2. Effet jQuery - fondu entrant et sortant

　(1) La méthode fadeIn() est utilisée pour faire apparaître des éléments cachés.

　 (2) La méthode fadeOut() est utilisée pour faire disparaître les éléments visibles.

　(3) La méthode fadeToggle() peut basculer entre les méthodes fadeIn() et fadeOut(). Si l’élément est déjà fondu, ajoutez un effet de fondu entrant. Si l’élément est déjà apparu en fondu, ajoutez un effet de fondu sortant.

　(4) La méthode fadeTo() permet un dégradé jusqu'à une opacité donnée (valeur comprise entre 0 et 1).

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btnfadeIn").click(function(){
                $("#myDiv1").fadeIn();
                //语法格式：$(selector).fadeIn(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });
            
            $("#btnfadeOut").click(function(){
                $("#myDiv1").fadeOut();
                //语法格式：$(selector).fadeOut(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });

            $("#btnfadeToggle").click(function(){
                $("#myDiv1").fadeToggle();
                //语法格式：$(selector).fadeToggle(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });

            $("#btnfadeTo").click(function(){
                $("#myDiv1").fadeTo("slow",0.35); 
                //语法格式：$(selector).fadeTo(speed,opacity,callback);
                //第一个参数是必须的：传入的值可以是"slow"、"fast" 、毫秒；
                //第二个参数是必须的：传入值是透明度，取值在0-1之间
                //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称。
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btnfadeIn">fadeIn</button>
    <button type="button" id="btnfadeOut">fadeOut</button>
    <button type="button" id="btnfadeToggle">fadeToggle</button>
    <button type="button" id="btnfadeTo">fadeTo</button>
    <div id="myDiv1" style="width:200px;height:100px;background-color:green"></div>
</body>
</html>

Copier après la connexion

3. Effet de glissement jQuery

　(1) La méthode slideDown() est utilisé Faites glisser l'élément vers le bas.

　(2) La méthode slideUp() est utilisée pour faire glisser l'élément vers le haut.

　(3) La méthode slideToggle() peut basculer entre les méthodes slideDown() et slideUp(). Si les éléments sont déjà glissés vers le bas, faites-les glisser vers le haut. Si les éléments sont déjà glissés vers le haut, faites-les glisser vers le bas.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btnslideDown").click(function(){
                $("#myDiv1").slideDown();
                //语法格式：$(selector).slideDown(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。
            });
            
            $("#btnslideUp").click(function(){
                $("#myDiv1").slideUp();
                //语法格式：$(selector).slideUp(speed,callback);;
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。

            });

            $("#btnslideToggle").click(function(){
                $("#myDiv1").slideToggle();
                //语法格式：$(selector).slideToggle(speed,callback);;
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。
            });

        });
    </script>
</head>
<body>
    <button type="button" id="btnslideDown">slideDown</button>
    <button type="button" id="btnslideUp">slideUp</button>
    <button type="button" id="btnslideToggle">slideToggle</button>
    <div id="myDiv1" style="width:200px;height:100px;background-color:green"></div>
</body>
</html>

Copier après la connexion

4. Effet jQuery - Animation La méthode

animate() est utilisée pour créer des animations personnalisées.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btn_animate").click(function(){
                $("#myDiv1").animate({left:'250px'});
                //语法格式：$(selector).animate({params},speed,callback);
                //第一个参数是必须的：值是定义形成动画的 CSS 属性
                //第二个参数是可选的：传入的值是"slow"、"fast" 、毫秒
                //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称
                 
                //第一个参数的css属性也可以使用相对值，像下面这样
                //$("#myDiv1").animate({left:'250px',height:'+=10px',width:'+=10px'});
            });
            
        });
    </script>
</head>
<body>
    <button type="button" id="btn_animate">animate</button>
    <div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div>
</body>
</html>

Copier après la connexion

5. jQuery -- Arrêter l'animation

La méthode stop() est utilisée pour arrêter les animations ou les effets après leur sont terminés.

La méthode stop() s'applique à toutes les fonctions d'effet jQuery, y compris les animations de glissement, de fondu et personnalisées.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btn_animate").click(function(){
                $("#myDiv1").animate({left:'250px'},5000);
            });

            $("#btn_stop").click(function(){
                $("#myDiv1").stop();
                //语法格式：$(selector).stop(stopAll,goToEnd);
                //可选参数1：规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
                //可选参数2：规定是否立即完成当前动画。默认是 false。
            });
            
        });
    </script>
</head>
<body>
    <button type="button" id="btn_animate">animate</button>
    <button type="button" id="btn_stop">Stop</button>
    <div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div>
</body>
</html>

Copier après la connexion

6. jQuery - Programmation en chaîne

Programmation de style de chaîne : Exécutez plusieurs commandes jQuery sur le même élément, l'une après l'autre. De cette façon, le navigateur n’a pas besoin de rechercher plusieurs fois le même élément. Pour lier une action, il vous suffit d'ajouter l'action à l'action précédente.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){  
            $("#btnLink").click(function(){
                $("#myDiv1").css("background-color","yellow").slideUp(2000).slideDown(2000);
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btnLink">链式编程</button>
    <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>
</body>
</html>

Copier après la connexion

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus d'effets spéciaux jQuery, il est recommandé de visiter : collection d'effets spéciaux js !

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!