溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery如何實現(xiàn)特效

發(fā)布時間：2020-09-29 17:00:34 來源：億速云 閱讀：143 作者：小新 欄目：web開發(fā)

jQuery如何實現(xiàn)特效？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

1、 jQuery 效果 --隱藏和顯示

使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素。

示例：

<!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);
                //可選參數(shù)1：speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取值："slow"、"fast" 或毫秒。
                //可選參數(shù)2：callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。

                // callback的使用如下，即第2個參數(shù)是一個函數(shù)，jQuery效果執(zhí)行完會執(zhí)行該函數(shù)。
                // $("#myDiv1").hide(3000,function(){
                //      alert("myDiv1隱藏了");
                // });
            });
            
            $("#btnShow").click(function(){
                $("#myDiv1").show();
                //語法格式：$(selector).show(speed,callback); 
                //可選參數(shù)1：speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取值："slow"、"fast" 或毫秒。
                //可選參數(shù)2：callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。
            });
        });
    </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>

jQuery如何實現(xiàn)特效　　jQuery如何實現(xiàn)特效　　jQuery如何實現(xiàn)特效

2、 jQuery 效果 - 淡入淡出

　　(1) fadeIn() 方法用于淡入已隱藏的元素。

　　(2) fadeOut() 方法用于淡出可見元素。

　　(3) fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則添加淡入效果。如果元素已淡入，則添加淡出效果。

　　(4) fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。

示例：

<!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);
                //可選參數(shù)1：speed 參數(shù)規(guī)定效果的時長。它可以取值："slow"、"fast" 或毫秒。
                //可選參數(shù)2：callback 參數(shù)是該效果完成后所執(zhí)行的函數(shù)名稱。
            });
            
            $("#btnfadeOut").click(function(){
                $("#myDiv1").fadeOut();
                //語法格式：$(selector).fadeOut(speed,callback);
                //可選參數(shù)1：speed 參數(shù)規(guī)定效果的時長。它可以取值："slow"、"fast" 或毫秒。
                //可選參數(shù)2：callback 參數(shù)是該效果完成后所執(zhí)行的函數(shù)名稱。
            });

            $("#btnfadeToggle").click(function(){
                $("#myDiv1").fadeToggle();
                //語法格式：$(selector).fadeToggle(speed,callback);
                //可選參數(shù)1：speed 參數(shù)規(guī)定效果的時長。它可以取值："slow"、"fast" 或毫秒。
                //可選參數(shù)2：callback 參數(shù)是該效果完成后所執(zhí)行的函數(shù)名稱。
            });

            $("#btnfadeTo").click(function(){
                $("#myDiv1").fadeTo("slow",0.35); 
                //語法格式：$(selector).fadeTo(speed,opacity,callback);
                //第一個參數(shù)是必須的：傳入的值可以是"slow"、"fast" 、毫秒；
                //第二個參數(shù)是必須的：傳入值是透明度，取值在0-1之間
                //第三個參數(shù)是可選的：callback 參數(shù)是該效果完成后所執(zhí)行的函數(shù)名稱。
            });
        });
    </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>

3、jQuery 效果 -滑動

　　(1) slideDown() 方法用于向下滑動元素。

　　(2) slideUp() 方法用于向上滑動元素。

　　(3) slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素已向下滑動，則向上滑動它們。如果元素已向上滑動，則向下滑動它們。

示例：

<!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);
                //可選參數(shù)1：speed 參數(shù)規(guī)定效果的時長。它可以取值："slow"、"fast" 或毫秒。
                //可選參數(shù)2：callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。
            });
            
            $("#btnslideUp").click(function(){
                $("#myDiv1").slideUp();
                //語法格式：$(selector).slideUp(speed,callback);;
                //可選參數(shù)1：speed 參數(shù)規(guī)定效果的時長。它可以取值："slow"、"fast" 或毫秒。
                //可選參數(shù)2：callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。

            });

            $("#btnslideToggle").click(function(){
                $("#myDiv1").slideToggle();
                //語法格式：$(selector).slideToggle(speed,callback);;
                //可選參數(shù)1：speed 參數(shù)規(guī)定效果的時長。它可以取值："slow"、"fast" 或毫秒。
                //可選參數(shù)2：callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。
            });

        });
    </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>

4、jQuery 效果 - 動畫

animate() 方法用于創(chuàng)建自定義動畫。

示例：

<!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);
                //第一個參數(shù)是必須的：值是定義形成動畫的 CSS 屬性
                //第二個參數(shù)是可選的：傳入的值是"slow"、"fast" 、毫秒
                //第三個參數(shù)是可選的：callback 參數(shù)是該效果完成后所執(zhí)行的函數(shù)名稱
                 
                //第一個參數(shù)的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>

5、jQuery -- 停止動畫

　　stop() 方法用于停止動畫或效果，在它們完成之前。

　　stop() 方法適用于所有 jQuery 效果函數(shù)，包括滑動、淡入淡出和自定義動畫。

示例：

<!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);
                //可選參數(shù)1：規(guī)定是否應(yīng)該清除動畫隊列。默認(rèn)是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行。
                //可選參數(shù)2：規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是 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>

6、 jQuery -- 鏈?zhǔn)骄幊?/strong>

鏈?zhǔn)骄幊?/span>：在相同的元素上運行多條 jQuery 命令，一條接著另一條。這樣的話，瀏覽器就不必多次查找相同的元素。如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。

示例：

<!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">鏈?zhǔn)骄幊?lt;/button>
    <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>
</body>
</html>

感謝各位的閱讀！看完上述內(nèi)容，你們對jQuery如何實現(xiàn)特效大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手