• jQuery Video Tutorials

jQuery - 效果

上一頁
下一頁

jQuery 效果為您的網站互動性增添了 X 因子。jQuery 提供了一個非常簡單的介面來執行各種令人驚歎的效果，例如顯示、隱藏、淡入、淡出、向上滑動、向下滑動、切換等。jQuery 方法允許我們以最少的配置快速應用常用的效果。本教程涵蓋了建立視覺效果的所有重要 jQuery 方法。

jQuery 效果 - 隱藏元素

jQuery 使用 hide() 方法提供了隱藏元素的簡單語法。

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

您可以應用任何 jQuery 選擇器來選擇任何 DOM 元素，然後應用 jQuery hide() 方法將其隱藏。以下是所有引數的描述，這些引數使您可以對隱藏效果進行精確控制：

  • speed - 此可選引數表示三個預定義速度之一（“slow”、“normal”或“fast”）或執行動畫的毫秒數（例如 1000）。

  • callback - 此可選引數表示一個函式，每當動畫完成時執行；針對每個動畫元素執行一次。

預設速度持續時間“normal”為 400 毫秒。“fast”和“slow”字串分別表示 200 和 600 毫秒的持續時間。較高的值表示動畫速度較慢。

示例

以下是一個示例，其中當我們單擊 <div> 時，它將隱藏自身。我們使用 1000 作為 speed 引數，這意味著它將花費 1 秒來對被單擊的元素應用隱藏效果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function(){
         $(this).hide(1000);
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px; cursor:pointer}
</style>
</head>
<body>
   <p>Click on any of the squares to see the result:</p>

   <div>Hide Me</div>
   <div>Hide Me</div>
   <div>Hide Me</div>
</body>
</html>

jQuery 效果 - 顯示元素

jQuery 使用 show() 方法提供了顯示隱藏元素的簡單語法。

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

您可以應用任何 jQuery 選擇器來選擇任何 DOM 元素，然後應用 jQuery show() 方法將其顯示。以下是所有引數的描述，這些引數使您可以控制顯示效果：

  • speed - 一個可選字串，表示三個預定義速度之一（“slow”、“normal”或“fast”）或執行動畫的毫秒數（例如 1000）。

  • callback - 此可選引數表示一個函式，每當動畫完成時執行；針對每個動畫元素執行一次。

示例

以下是一個示例，我們將使用兩個按鈕來操作一個方框。我們將使用這兩個按鈕來顯示和隱藏此方框。我們對兩種效果 hide(5000) 和 show(1000) 使用了不同的速度來顯示效果速度的差異。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#show").click(function(){
         $("#box").show(1000);
      });
      $("#hide").click(function(){
         $("#box").hide(5000);
      });
   });
</script>
<style>
   button{cursor:pointer;}
   #box{margin-bottom:5px;padding:12px;height:100px; width:125px; background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on Show and Hide buttons to see the result:</p>

   <div id="box">This is Box</div>
   <button id="hide">Hide Box</button>
   <button id="show">Show Box</button>
</body>
</html>

jQuery 效果 - 切換元素

jQuery 提供了 toggle() 方法來在顯示或隱藏之間切換元素的顯示狀態。如果元素最初顯示，它將被隱藏；如果隱藏，它將被顯示。

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

您可以應用任何 jQuery 選擇器來選擇任何 DOM 元素，然後應用 jQuery toggle() 方法對其進行切換。以下是所有引數的描述，這些引數使您可以對切換效果進行精確控制：

  • speed - 一個可選字串，表示三個預定義速度之一（“slow”、“normal”或“fast”）或執行動畫的毫秒數（例如 1000）。

  • callback - 此可選引數表示一個函式，每當動畫完成時執行；針對每個動畫元素執行一次。

示例

以下是一個示例，我們將使用一個切換按鈕來操作一個方形方框。當我們第一次單擊此按鈕時，方形方框變得不可見，下次我們單擊按鈕時，方形方框變得可見。我們使用 1000 作為 speed 引數，這意味著它將花費 1 秒來應用切換效果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#button").click(function(){
         $("#box").toggle(1000);
      });
   });
</script>
<style>
   button{margin:3px;width:125px;cursor:pointer;}
   #box{margin:3px;padding:12px; height:100px; width:100px;background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on the Toggle Box button to see the box toggling:</p>

   <div id="box">This is Box</div>
   <button id="button">Toggle Box</button>
</body>
</html>

jQuery 效果 - 淡入淡出元素

jQuery 為我們提供了兩種方法 - fadeIn() 和 fadeOut()，分別用於淡入和淡出 DOM 元素的可見性。

$(selector).fadeIn( [speed, callback] );

$(selector).fadeOut( [speed, callback] );

jQuery fadeIn() 方法用於淡入隱藏的元素，而 fadeOut() 方法用於淡出可見的元素。以下是所有引數的描述，這些引數使您可以控制淡入淡出效果：

  • speed - 一個可選字串，表示三個預定義速度之一（“slow”、“normal”或“fast”）或執行動畫的毫秒數（例如 1000）。

  • callback - 此可選引數表示一個函式，每當動畫完成時執行；針對每個動畫元素執行一次。

示例

以下是一個示例，我們將使用兩個按鈕來操作一個方框。我們將使用這兩個按鈕來顯示和隱藏此方框。我們使用 1000 作為 speed 引數，這意味著它將花費 1 秒來應用效果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#show").click(function(){
         $("#box").fadeIn(1000);
      });
      $("#hide").click(function(){
         $("#box").fadeOut(1000);
      });
   });
</script>
<style>
   button{cursor:pointer;}
   #box{margin-bottom:5px;padding:12px;height:100px; width:150px; background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on fadeOut and fadeIn buttons to see the result:</p>

   <div id="box">This is Box</div>
   <button id="hide">fadeOut Box</button>
   <button id="show">fadeIn Box</button>
</body>
</html>

jQuery 效果 - 帶淡入淡出的切換

jQuery 提供了 fadeToggle() 方法來在 fadeIn() 和 fadeOut() 方法之間切換元素的顯示狀態。如果元素最初顯示，它將被隱藏（即 fadeOut()）；如果隱藏，它將被顯示（即 fadeIn()）。

$(selector).fadeToggle( [speed, callback] );

此方法提供了與使用 toggle() 方法相同的功能，但此外，它在切換元素時還提供了淡入和淡出效果。

以下是所有引數的描述，這些引數使您可以更好地控制效果：

  • speed - 一個可選字串，表示三個預定義速度之一（“slow”、“normal”或“fast”）或執行動畫的毫秒數（例如 1000）。

  • callback - 此可選引數表示一個函式，每當動畫完成時執行；針對每個動畫元素執行一次。

示例

以下是一個示例，我們將使用一個按鈕來操作一個方形方框。當我們第一次單擊此按鈕時，方形方框淡出（隱藏），下次我們單擊按鈕時，方形方框淡入（可見）。我們使用 1000 作為 speed 引數，這意味著它將花費 1 秒來應用切換效果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#button").click(function(){
         $("#box").fadeToggle(1000);
      });
   });
</script>
<style>
   button{margin:3px;width:125px;cursor:pointer;}
   #box{margin:3px;padding:12px; height:100px; width:100px;background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on the Toggle Box button to see the box toggling:</p>

   <div id="box">This is Box</div>
   <button id="button">Toggle Box</button>
</body>
</html>
嘗試使用 jQuery $(selector).toggle() 和 $(selector).fadeToggle() 方法來理解這兩種方法之間的細微差別。

jQuery 效果 - 滑動元素

jQuery 為我們提供了兩種方法 - slideUp() 和 slideDown()，分別用於向上和向下滑動 DOM 元素。以下是這兩種方法的簡單語法

$(selector).slideUp( [speed, callback] );

$(selector).slideDown( speed, [callback] );

jQuery slideUp() 方法用於向上滑動元素，而 slideDown() 方法用於向下滑動。以下是所有引數的描述，這些引數使您可以更好地控制效果：

  • speed - 一個可選字串，表示三個預定義速度之一（“slow”、“normal”或“fast”）或執行動畫的毫秒數（例如 1000）。

  • callback - 此可選引數表示一個函式，每當動畫完成時執行；針對每個動畫元素執行一次。

示例

以下是一個示例，我們將使用兩個按鈕來操作一個方框。我們將使用這兩個按鈕來顯示和隱藏此方框。我們使用 1000 作為 speed 引數，這意味著它將花費 1 秒來應用切換效果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#show").click(function(){
         $("#box").slideDown(1000);
      });
      $("#hide").click(function(){
         $("#box").slideUp(1000);
      });
});
</script>
<style>
   button{cursor:pointer;}
   #box{margin-bottom:5px;padding:12px;height:100px; width:120px; background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on slideUp and slideDown buttons to see the result:</p>

   <div id="box">This is Box</div>
   <button id="hide">slideUp </button>
   <button id="show">slideDown </button>
</body>
</html>

jQuery 效果 - 帶滑動的切換

jQuery 提供了 slideToggle() 方法來在 slideUp() 和 slideDown() 方法之間切換元素的顯示狀態。如果元素最初顯示，它將被隱藏（即 slideUp()）；如果隱藏，它將被顯示（即 slideDown()）。

$(selector).slideToggle( [speed, callback] );

此方法提供了與使用 toggle() 方法相同的功能，但此外，它在切換元素時還提供了向上和向下滑動效果。

以下是所有引數的描述，這些引數使您可以更好地控制效果：

  • speed - 一個可選字串，表示三個預定義速度之一（“slow”、“normal”或“fast”）或執行動畫的毫秒數（例如 1000）。

  • callback - 此可選引數表示一個函式，每當動畫完成時執行；針對每個動畫元素執行一次。

示例

以下是一個示例，我們將使用一個按鈕來操作一個方形方框。當我們第一次單擊此按鈕時，方形方框淡出（隱藏），下次我們單擊按鈕時，方形方框淡入（可見）。我們使用 1000 作為 speed 引數，這意味著它將花費 1 秒來應用切換效果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#button").click(function(){
         $("#box").slideToggle(1000);
      });
   });
</script>
<style>
   button{margin:3px;width:125px;cursor:pointer;}
   #box{margin:3px;padding:12px; height:100px; width:100px;background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Click on the Toggle Box button to see the box toggling:</p>

   <div id="box">This is Box</div>
   <button id="button">Toggle Box</button>
</body>
</html>
嘗試使用 jQuery $(selector).toggle()、$(selector).slideToggle() 和 $(selector).fadeToggle() 方法來理解這三種方法之間的細微差別。

jQuery 效果參考

本教程僅介紹了一些最常用的 jQuery 效果，您可以在以下頁面找到所有 jQuery 效果方法的完整參考：jQuery 效果參考。

列印頁面
上一頁
下一頁
廣告