Jquery 简明教程

jQuery - Effects

jQuery 效果为你的网站交互性增加了 X 因素。jQuery 为各种令人惊叹的效果提供了极其简单的界面，如显示、隐藏、淡入、淡出、向上滑动、向下滑动、切换等。jQuery 方法使我们能够使用最少的配置快速应用常用效果。本教程涵盖了所有重要的 jQuery 方法，可用以创建视觉效果。

jQuery effects add an X factor to your website interactivity. jQuery provides a trivially simple interface for doing various kind of amazing effects like show, hide, fade-in, fade-out, slide-up, slide-down, toggle etc. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. This tutorial covers all the important jQuery methods to create visual effects.

jQuery Effect - Hiding Elements

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

jQuery gives simple syntax to hide an element with the help of hide() method:

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

您可以应用任何 jQuery selector 以选择任何 DOM 元素，然后应用 jQuery hide() 方法来隐藏它。以下是所有参数的说明，可以为您提供对隐藏效果的可靠控制−

You can apply any jQuery selector to select any DOM element and then apply jQuery hide() method to hide it. Here is the description of all the parameters which gives you a solid control over the hiding effect −

speed − This optional parameter represents one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example

以下是一个示例，其中 <div> 将在我们单击它时隐藏自身。我们已使用 1000 作为速度参数，这意味着在已单击元素上应用隐藏效果将需要 1 秒钟。

Following is an example where a <div> will hide itself when we click over it. We have used 1000 as speed parameter which means it will take 1 second to apply the hide effect on the clicked element.

<!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 Effect - Show Elements

jQuery 提供简单的语法来在 show() 方法的帮助下显示隐藏的元素：

jQuery gives simple syntax to show a hidden element with the help of show() method:

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

您可以应用任何 jQuery selector 以选择任何 DOM 元素，然后应用 jQuery show() 方法来显示它。以下是所有参数的说明，可以为您提供对显示效果的控制−

You can apply any jQuery selector to select any DOM element and then apply jQuery show() method to show it. Here is the description of all the parameters which gives you a control over the show effect −

speed − An optional string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example

以下是一个示例，其中我们将使用两个按钮来玩一个盒子。我们将使用这两个按钮来显示和隐藏此框。我们为两种效果 hide(5000) 和 show(1000) 使用了不同的速度来显示效果速度的差异。

Following is an example where we will play with a Box with the help of two buttons. We will use these two buttons to show and hide this Box. We have used different speeds for the two effects hide(5000) and show(1000) to show the difference in effect speed.

<!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 Effect - Toggle Elements

jQuery 提供 toggle() 方法来切换已显示或已隐藏元素的显示状态。如果元素最初显示，它将被隐藏；如果隐藏，它将显示。

jQuery provides toggle() methods to toggle the display state of elements between revealed or hidden. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

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

您可以应用任何 jQuery selector 以选择任何 DOM 元素，然后应用 jQuery toggle() 方法来切换它。以下是所有参数的说明，可以为您提供对切换效果的可靠控制−

You can apply any jQuery selector to select any DOM element and then apply jQuery toggle() method to toggle it. Here is the description of all the parameters which gives you a solid control over the toggle effect −

speed − An optional string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example

以下是一个示例，其中我们将使用一个切换按钮来玩一个方框。当我们首次单击此按钮时，正方形框将变为不可见，下次我们单击按钮后，正方形框将变为可见。我们已使用 1000 作为速度参数，这意味着应用切换效果将需要 1 秒钟。

Following is an example where we will play with a Square Box with the help of a single Toggle button. When we click this button for the first time, square box becomes invisible, and next time when we click the button then square box becomes visible. We have used 1000 as speed parameter which means it will take 1 second to apply the toggle effect.

<!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 Effect - Fading Elements

jQuery 为我们提供了两种方法 - fadeIn() 和 fadeOut() 来淡化 DOM 元素 in 和 out 的可见性。

jQuery gives us two methods - fadeIn() and fadeOut() to fade the DOM elements in and out of visibility.

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

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

jQuery fadeIn() 方法用于淡入隐藏元素，而 fadeOut() 方法用于淡出可见元素。以下是所有参数的说明，可以为您提供对淡化效果的控制−

The jQuery fadeIn() method is used to fade in a hidden element where as fadeOut() method is used to fade out a visible element. Here is the description of all the parameters which gives you a control over the fading effects −

speed − An optional string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example

以下是一个示例，其中我们将使用两个按钮来玩一个盒子。我们将使用这两个按钮来显示和隐藏此框。我们已使用 1000 作为速度参数，这意味着应用效果将需要 1 秒钟。

Following is an example where we will play with a Box with the help of two buttons. We will use these two buttons to show and hide this Box. We have used 1000 as speed parameter which means it will take 1 second to apply the effect.

<!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 Effect - Toggle with Fading

jQuery 提供 fadeToggle() 方法来切换 fadeIn() 和 fadeOut() 方法之间的元素的显示状态。如果元素最初显示，它将被隐藏（即 fadeOut()）；如果隐藏，它将显示（即 fadeIn()）。

jQuery provides fadeToggle() methods to toggle the display state of elements between the fadeIn() and fadeOut() methods. If the element is initially displayed, it will be hidden (ie. fadeOut()); if hidden, it will be shown (ie. fadeIn()).

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

此方法提供了与 toggle() 方法相同的功能，但此外，它在切换元素时还提供淡入和淡出效果。

This method gives the same functionality what we can have using toggle() method, but additionally, it gives fade in and fade out effect while toggling the element.

以下是所有参数的说明，可以让您更全面地控制效果−

Here is the description of all the parameters which gives you more control over the effect −

speed − An optional string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example

以下是一个示例，其中我们将使用一个按钮来玩一个方框。当我们首次单击此按钮时，正方形框淡出（隐藏），下次我们单击按钮时，正方形框淡入（可见）。我们已使用 1000 作为速度参数，这意味着应用切换效果将需要 1 秒钟。

Following is an example where we will play with a Square Box with the help of a single button. When we click this button for the first time, square box fades out (hidden), and next time when we click the button then square box fades in (visible). We have used 1000 as speed parameter which means it will take 1 second to apply the toggle effect.

<!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 Effect - Sliding Elements

jQuery 为我们提供了两个方法 - slideUp() 和 slideDown() 来分别向上滑动和向下滑动 DOM 元素。以下是这两个方法的简单语法：

jQuery gives us two methods - slideUp() and slideDown() to slide up and slide down the DOM elements respectively. Following is the simple syntax for these two methods:

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

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

jQuery slideUp() 方法用于向上滑动一个元素， slideDown() 方法用于向下滑动。以下是所有参数的描述，这些参数可以让你更好地控制效果 −

The jQuery slideUp() method is used to slide up an element where as slideDown() method is used to slide down. Here is the description of all the parameters which gives you more control over the effects −

speed − An optional string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example

以下是一个示例，我们将借助两个按钮玩一个盒子。我们将使用这两个按钮来显示和隐藏此盒子。我们使用了 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 Effect - Toggle with Sliding

jQuery 提供 slideToggle() 方法在 slideUp() 和 slideDown() 方法之间切换显示状态。如果元素最初显示，它将被隐藏（即 slideUp()）；如果隐藏，它将被显示（即 slideDown()）。

jQuery provides slideToggle() methods to toggle the display state of elements between the slideUp() and slideDown() methods. If the element is initially displayed, it will be hidden (ie. slideUp()); if hidden, it will be shown (ie. slideDown()).

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

该方法提供了与使用 toggle() 方法相同的功能，但除此之外，它还提供在切换元素时的向上和向下滑动效果。

This method gives the same functionality what we can have using toggle() method, but additionally, it gives slide up and slide down effect while toggling the element.

以下是所有参数的说明，可以让您更全面地控制效果−

Here is the description of all the parameters which gives you more control over the effect −

speed − An optional string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example

<!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 Effects Reference

本教程仅涵盖了几个最常用的 jQuery 效果，你可以在以下页面获取所有 jQuery 效果方法的完整参考： jQuery Effects Reference 。

This tutorial covered only a few most frequently used jQuery effects, You can get a complete reference of all the jQuery Effect Methods at the following page: jQuery Effects Reference.