Welche Spezialeffekte kann jQuery erzielen? Verwendung von jQuery-Spezialeffekten (Codebeispiel)-js-Tutorial-php.cn

Der Inhalt dieses Artikels besteht darin, vorzustellen, welche Spezialeffekte jQuery erzielen kann. Verwendung von jQuery-Spezialeffekten (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. [Empfohlene verwandte Video-Tutorials: jQuery-Tutorial]

1. jQuery-Effekt – Ein- und Ausblenden

Verwenden Sie die Methoden hide() und show(), um HTML-Elemente auszublenden und anzuzeigen.

Beispiel:

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

Nach dem Login kopieren

2. jQuery-Effekt – Ein- und Ausblenden

　 (1) Die fadeIn()-Methode wird zum Einblenden ausgeblendeter Elemente verwendet.

　 (2) Die fadeOut()-Methode wird verwendet, um sichtbare Elemente auszublenden.

　(3) Die Methode fadeToggle() kann zwischen den Methoden fadeIn() und fadeOut() wechseln. Wenn das Element bereits ausgeblendet ist, fügen Sie einen Einblendeffekt hinzu. Wenn das Element bereits eingeblendet ist, fügen Sie einen Ausblendeffekt hinzu.

　(4) Die fadeTo()-Methode ermöglicht einen Farbverlauf zu einer bestimmten Deckkraft (Wert zwischen 0 und 1).

Beispiel:

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

Nach dem Login kopieren

3. jQuery effect-sliding

　(1) Die Methode slideDown() wird für die Abwärtsbewegung verwendet Schiebeelement.

　(2) Die slideUp()-Methode wird verwendet, um das Element nach oben zu schieben.

　(3) Die Methode slideToggle() kann zwischen den Methoden slideDown() und slideUp() wechseln. Wenn die Elemente bereits nach unten geschoben sind, schieben Sie sie nach oben. Wenn die Elemente nach oben geschoben wurden, schieben Sie sie nach unten.

Beispiel:

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

Nach dem Login kopieren

4. jQuery-Effekt – Animation

animate()-Methode wird zum Erstellen benutzerdefinierter Animationen verwendet.

Beispiel:

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

Nach dem Login kopieren

5. jQuery – Animation stoppen

Die stop()-Methode wird verwendet, um Animationen oder Effekte zu stoppen, bevor sie abgeschlossen sind .

Die stop()-Methode gilt für alle jQuery-Effektfunktionen, einschließlich Schieben, Ausblenden und benutzerdefinierte Animationen.

Beispiel:

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

Nach dem Login kopieren

6. jQuery – Kettenprogrammierung

Kettenprogrammierung : Führen Sie mehrere jQuery-Befehle direkt nacheinander für dasselbe Element aus. Auf diese Weise muss der Browser nicht mehrmals nach demselben Element suchen. Um eine Aktion zu verknüpfen, hängen Sie die Aktion einfach an die vorherige Aktion an.

Beispiel:

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

Nach dem Login kopieren

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Lernen aller hilfreich sein wird. Für weitere jQuery-Spezialeffekte wird empfohlen, die js-Spezialeffektsammlung zu besuchen!

Das obige ist der detaillierte Inhalt vonWelche Spezialeffekte kann jQuery erzielen? Verwendung von jQuery-Spezialeffekten (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!