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

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

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

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

<style>```python 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個按鈕綁定單擊事件，實現單擊“顯示”按鈕控制div元素的顯示，第14_{18行給頁面中的第2個按鈕綁定單擊事件，實現單擊“隱藏”按鈕控制div元素的隱藏，第19}21行給頁面中的第3個按鈕綁定單擊事件，實現單擊“切換”按鈕控制div元素的顯示和隱藏。

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

如果您對java技術非常感興趣，可以關注小千，后期分享更多前端知識。本文來自千鋒教育，轉載請注明出處。

總結

以上是生活随笔為你收集整理的jQuery动画的显示与隐藏效果！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。