【天天一個JQuery特效】(demo6)在指定的時間內完成元素的顯示或隱藏

時間 2019-11-17

標籤天天一個JQuery特效 demo6 demo 指定時間內完成元素顯示隱藏欄目 JQuery 简体版

原文原文鏈接

經過 jQuery，您可使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素,語法：javascript

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。html

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。java

經過 jQuery，您可使用 toggle() 方法來切換 hide() 和 show() 方法。jquery

顯示被隱藏的元素，並隱藏已顯示的元素，語法：ide

$(selector).toggle(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。函數

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在指定的時間內完成元素的顯示或隱藏</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    //對單擊「延時顯示」按鈕的響應
    function ShowDelay(){
        $("#test").show(5000);
    }
    //對單擊「延時隱藏」按鈕的響應
    function HideDelay(){
        $("#test").hide(10000);
    }
    //對單擊「自動切換」按鈕的響應
    function AutoSwitch(){
        $("#test").toggle(8000);
    }
    </script>
    <style>
    #test{
        display: none;
        width: 400px;
        height: 200px;
        border: 1px solid blue;
        background:url("img/girl.jpg");
    }
    </style>
</head>
<body>
    <div id="test"></div><br>
    <button onclick="ShowDelay()" style="width: 130px;">延時展現</button>
    <button onclick="HideDelay()" style="width: 130px;">延時隱藏</button>
    <button onclick="AutoSwitch()" style="width: 130px;">自動切換</button>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。