首頁 > web前端 > 前端問答 > jquery怎麼實現兩秒後消失

jquery怎麼實現兩秒後消失

WBOY
發布: 2022-01-10 16:49:22
原創
1682 人瀏覽過

在jquery中,可用delay()和hide()函數來說實現元素兩秒後消失效果,delay()函數用於對佇列下一項的執行設定延遲時間,hide()函數用於隱藏被選中的元素,語法為「$(元素).delay(2000).hide(200)」。

jquery怎麼實現兩秒後消失

本教學操作環境:windows10系統、jquery3.2.1版本、Dell G3電腦。

jquery怎樣實現兩秒後消失

#delay() 方法對佇列中的下一項的執行設定延遲。

語法

$(selector).delay(speed,queueName)
登入後複製

參數

speed    可選。規定延遲的速度。可能的值:毫秒、"slow"、"fast"    

queueName  可選。規定隊列的名稱。預設是 "fx",標準效果隊列。   

hide() 方法隱藏被選取元素。

提示:這與 CSS 屬性 display:none 類似。

註解:隱藏的元素不會被完全顯示(不再影響頁面的佈局)。

提示:如需顯示隱藏的元素,請查看 show() 方法。

語法

$(selector).hide(speed,easing,callback)
登入後複製

範例如下:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $("#dianji").click(function(){
            $("#disappare").delay(2000).hide(200);
        });
    })
</script>
</head>
<body>
    <div id="content">
        <button id="dianji">点击</button>
        <div id="disappare">
            <p>点击2秒后会自动消失</p>
        </div>
    </div>
</body>
</html>
登入後複製

輸出結果:

jquery怎麼實現兩秒後消失

相關影片教學推薦: jQuery影片教學

以上是jquery怎麼實現兩秒後消失的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板