首頁技術文章正文

jQuery動畫的顯示與隱藏效果

更新時間:2021-07-19 來源:黑馬程序員 瀏覽量:

IT培訓班

jQuery中用于控制元素顯示和隱藏效果的方法如表1所示。

表1 控制元素的顯示和隱藏

方法說明
show([speed,[easing],[fn]])                             顯示隱藏的匹配元素                                       
hide([speed,[easing],[fn]])隱藏顯示的匹配元素
toggle([speed],[easing],[ fn])元素顯示與隱藏切換

在表1中,參數(shù)speed表示動畫的速度,可設置為動畫時長的毫秒值(如1000),或預定的3種速度(slow、fast和normal);參數(shù)easing表示切換效果,默認效果為swing,還可以使用linear效果;參數(shù)fn表示在動畫完成時執(zhí)行的函數(shù)。

下面通過代碼演示show()、hide()和toggle()的簡單使用。

   <style>
    div { width: 150px; height: 300px; background-color: pink; }
   </style>
   <button>顯示</button>
   <button>隱藏</button>
   <button>切換</button>
   <div></div>
   <script>
    $("button").eq(0).click(function() {
    $("div").show(1000, function() {
     alert("已顯示");
    });
   });
   $("button").eq(1).click(function() {
    $("div").hide(1000, function() {
     alert("已隱藏");
    });
   });
   $("button").eq(2).click(function() {
    $("div").toggle(1000);
   });
  </script>

上述代碼中,第2行設置div元素的樣式寬度150px,高度300px,背景色pink。第4~6行分別定義功能按鈕,第7行定義div元素,第9~13行給頁面中的第1個按鈕綁定單擊事件,實現(xiàn)單擊“顯示”按鈕控制div元素的顯示,第14~18行給頁面中的第2個按鈕綁定單擊事件,實現(xiàn)單擊“隱藏”按鈕控制div元素的隱藏,第19~21行給頁面中的第3個按鈕綁定單擊事件,實現(xiàn)單擊“切換”按鈕控制div元素的顯示和隱藏。

在瀏覽器中運行,效果如圖1所示。

jQuery動畫

圖1 案例效果








猜你喜歡:

jquery教程視頻百度云下載【黑馬程序員】

如何獲取jQuery?jQuery的使用演示

什么是jQuery對象?

寫出jQuery鏈式調用實現(xiàn)方法【前端面試題】

黑馬程序員前端高手班培訓

分享到:
在線咨詢 我要報名
和我們在線交談!