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.com/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.com/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.com/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.com/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.com/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.com/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 - 此可选参数表示一个函数，每当动画完成时执行；针对每个动画元素执行一次。

示例

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/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 效果参考。

打印页面