【天天一个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>