笙亿网络策划

jQuery 动画效果怎么实现？

约 20 分钟读完 37 阅
文章导读
上一个 测验 下一个 jQuery 效果为您的网站交互性增添了 X 因素。jQuery 提供了一个极其简单的接口，用于实现各种惊人的效果，如 show、hide、fade-in、fade-out、slide-up、slide-down、toggle 等。jQuery 方法允
📋 目录
  1. 壹 jQuery 效果 - 隐藏元素
  2. 贰 jQuery 效果 - 显示元素
  3. 叁 jQuery 效果 - 切换元素
  4. 肆 jQuery 效果 - 淡入元素
  5. 伍 jQuery 效果 - 带淡入淡出的切换
  6. 陆 jQuery 效果 - 滑动元素
  7. 柒 jQuery 效果 - 使用滑动切换
  8. 捌 jQuery 效果参考
A A

jQuery - 效果

上一个
测验
下一个

jQuery 效果为您的网站交互性增添了 X 因素。jQuery 提供了一个极其简单的接口，用于实现各种惊人的效果，如 show、hide、fade-in、fade-out、slide-up、slide-down、toggle 等。jQuery 方法允许我们以最小的配置快速应用常用效果。本教程涵盖了创建视觉效果的所有重要 jQuery 方法。

jQuery 效果 - 隐藏元素

jQuery 通过 hide() 方法提供简单的语法来隐藏元素：

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

您可以应用任何 jQuery selector 来选择任何 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://www.example.com"></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 selector 来选择任何 DOM 元素，然后应用 jQuery show() 方法来显示它。以下是所有参数的描述，这些参数让您能够控制显示效果 −

  • speed − 可选的字符串，表示三种预定义速度之一（"slow"、"normal" 或 "fast"）或运行动画的毫秒数（例如 1000）。

  • callback − 此可选参数表示一个函数，当动画完成时执行；针对每个被动画化的元素执行一次。

示例

以下示例中，我们将通过两个按钮来操作一个 Box。我们将使用这两个按钮来显示和隐藏这个 Box。我们为两种效果使用了不同的速度 hide(5000) 和 show(1000)，以展示效果速度的差异。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.example.com"></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 selector 来选择任何 DOM 元素，然后应用 jQuery toggle() 方法来切换它。以下是所有参数的描述，这些参数让您对切换效果有坚实的控制 −

  • speed − 可选的字符串，表示三种预定义速度之一（"slow"、"normal" 或 "fast"）或运行动画的毫秒数（例如 1000）。

  • callback − 此可选参数表示一个函数，当动画完成时执行；针对每个被动画化的元素执行一次。

示例

以下示例中，我们将通过单个 Toggle 按钮来操作一个 Square Box。第一次点击此按钮时，方形 Box 变为不可见，下一次点击按钮时，方形 Box 变为可见。我们使用了 1000 作为 speed 参数，这意味着应用切换效果需要 1 秒。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.example.com"></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 − 此可选参数表示一个函数，在动画完成时执行；针对每个被动画化的元素执行一次。

示例

以下示例中，我们将使用两个按钮来操作一个 Box。我们将使用这两个按钮来显示和隐藏这个 Box。我们使用了 1000 作为 speed 参数，这意味着应用效果需要 1 秒。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.example.com"></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 − 此可选参数表示一个函数，在动画完成时执行；针对每个被动画化的元素执行一次。

示例

以下示例中，我们将使用单个按钮来操作一个方形 Box。第一次点击此按钮时，方形 Box 会淡出（隐藏），下一次点击按钮时，方形 Box 会淡入（可见）。我们使用了 1000 作为 speed 参数，这意味着应用切换效果需要 1 秒。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.example.com"></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 − 这个可选参数表示一个函数，当动画完成时执行；针对每个被动画化的元素执行一次。

示例

以下示例中，我们将通过两个按钮来操作一个 Box。我们将使用这两个按钮来显示和隐藏这个 Box。我们使用了 1000 作为 speed 参数，这意味着应用切换效果需要 1 秒。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.example.com"></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://www.example.com"></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 Effects Reference。