• jQuery 视频教程

jQuery - 效果

jQuery 效果为您的网站交互性添加了 X 因素。jQuery 提供了一个非常简单的界面，用于执行各种令人惊叹的效果，如显示、隐藏、淡入、淡出、上滑、下滑、切换等。jQuery 方法允许我们以最少的速度快速应用常用的效果配置。本教程涵盖了创建视觉效果的所有重要 jQuery 方法。

jQuery 效果 - 隐藏元素

jQuery 提供了简单的语法来借助hide()方法隐藏元素：

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

您可以应用任何 jQuery选择器来选择任何 DOM 元素，然后应用 jQuery hide()方法来隐藏它。以下是所有参数的描述，使您可以可靠地控制隐藏效果 -

  • speed - 此可选参数表示三个预定义速度之一（“慢”、“正常”或“快”）或运行动画的毫秒数（例如 1000）。

  • 回调- 此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

默认速度持续时间“正常”为 400 毫秒。可以提供字符串“fast”和“slow”来分别表示 200 毫秒和 600 毫秒的持续时间。值越高表示动画越慢。

例子

以下是一个示例，当我们单击 <div> 时，它会隐藏自己。我们使用 1000 作为速度参数，这意味着需要 1 秒才能对单击的元素应用隐藏效果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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 - 一个可选字符串，表示三个预定义速度（“慢”、“正常”或“快”）之一或运行动画的毫秒数（例如 1000）。

  • 回调- 此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

例子

以下是一个示例，我们将在两个按钮的帮助下使用 Box。我们将使用这两个按钮来显示和隐藏此框。我们对 hide(5000) 和 show(1000) 两个效果使用了不同的速度，以显示效果速度的差异。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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 - 一个可选字符串，表示三个预定义速度（“慢”、“正常”或“快”）之一或运行动画的毫秒数（例如 1000）。

  • 回调- 此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

例子

以下是一个示例，我们将在单个切换按钮的帮助下使用方形盒子。当我们第一次单击此按钮时，方框将变得不可见，下次单击该按钮时，方框将变为可见。我们使用 1000 作为速度参数，这意味着应用切换效果需要 1 秒。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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 - 一个可选字符串，表示三个预定义速度（“慢”、“正常”或“快”）之一或运行动画的毫秒数（例如 1000）。

  • 回调- 此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

例子

以下是一个示例，我们将在两个按钮的帮助下使用 Box。我们将使用这两个按钮来显示和隐藏此框。我们使用 1000 作为速度参数，这意味着应用效果需要 1 秒。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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 - 一个可选字符串，表示三个预定义速度（“慢”、“正常”或“快”）之一或运行动画的毫秒数（例如 1000）。

  • 回调- 此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

例子

以下是一个示例，我们将在单个按钮的帮助下使用方形盒子。当我们第一次单击此按钮时，方框会淡出（隐藏），下次单击该按钮时，方框会淡入（可见）。我们使用 1000 作为速度参数，这意味着应用切换效果需要 1 秒。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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 - 一个可选字符串，表示三个预定义速度（“慢”、“正常”或“快”）之一或运行动画的毫秒数（例如 1000）。

  • 回调- 此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

例子

以下是一个示例，我们将在两个按钮的帮助下使用 Box。我们将使用这两个按钮来显示和隐藏此框。我们使用 1000 作为速度参数，这意味着应用切换效果需要 1 秒。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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 - 一个可选字符串，表示三个预定义速度（“慢”、“正常”或“快”）之一或运行动画的毫秒数（例如 1000）。

  • 回调- 此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

例子

以下是一个示例，我们将在单个按钮的帮助下使用方形盒子。当我们第一次单击此按钮时，方框会淡出（隐藏），下次单击该按钮时，方框会淡入（可见）。我们使用 1000 作为速度参数，这意味着应用切换效果需要 1 秒。

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