jQuery - Effects-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - Effects

jQuery effects add an X factor to your website interactivity. jQuery provides a trivially simple interface for doing various kind of amazing effects pke show, hide, fade-in, fade-out, spde-up, spde-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 gives simple syntax to hide an element with the help of hide() method:

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

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 sopd control over the hiding effect −

speed − This optional parameter represents one of the three predefined speeds ("slow", "normal", or "fast") or the number of milpseconds 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.

The default speed duration normal is 400 milpseconds. The strings fast and slow can be suppped to indicate durations of 200 and 600 milpseconds, respectively. Higher values indicate slower animations.

Example

Following is an example where a <span> will hide itself when we cpck over it. We have used 1000 as speed parameter which means it will take 1 second to apply the hide effect on the cpcked 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() {
      $("span").cpck(function(){
         $(this).hide(1000);
      });
   });
</script>
<style>
   span{ margin:10px;padding:12px; border:2px sopd #666; width:60px; cursor:pointer}
</style>
</head>
<body>
   <p>Cpck on any of the squares to see the result:</p>

   <span>Hide Me</span>
   <span>Hide Me</span>
   <span>Hide Me</span>
</body>
</html>

jQuery Effect - Show Elements

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

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

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 milpseconds 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

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").cpck(function(){
         $("#box").show(1000);
      });
      $("#hide").cpck(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>Cpck on Show and Hide buttons to see the result:</p>

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

jQuery Effect - Toggle Elements

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] );

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 sopd control over the toggle effect −

speed − An optional string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milpseconds 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

Following is an example where we will play with a Square Box with the help of a single Toggle button. When we cpck this button for the first time, square box becomes invisible, and next time when we cpck 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").cpck(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>Cpck on the Toggle Box button to see the box toggpng:</p>

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

jQuery Effect - Fading Elements

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

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

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

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 milpseconds 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

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").cpck(function(){
         $("#box").fadeIn(1000);
      });
      $("#hide").cpck(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>Cpck on fadeOut and fadeIn buttons to see the result:</p>

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

jQuery Effect - Toggle with Fading

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] );

This method gives the same functionapty what we can have using toggle() method, but additionally, it gives fade in and fade out effect while toggpng 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 milpseconds 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

Following is an example where we will play with a Square Box with the help of a single button. When we cpck this button for the first time, square box fades out (hidden), and next time when we cpck 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").cpck(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>Cpck on the Toggle Box button to see the box toggpng:</p>

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

Try using jQuery $(selector).toggle() and $(selector).fadeToggle() methods to understand the minor difference between these two methods.

jQuery Effect - Spding Elements

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

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

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

The jQuery spdeUp() method is used to spde up an element where as spdeDown() method is used to spde 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 milpseconds 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() {
      $("#show").cpck(function(){
         $("#box").spdeDown(1000);
      });
      $("#hide").cpck(function(){
         $("#box").spdeUp(1000);
      });
});
</script>
<style>
   button{cursor:pointer;}
   #box{margin-bottom:5px;padding:12px;height:100px; width:120px; background-color:#9c9cff;}
</style>
</head>
<body>
   <p>Cpck on spdeUp and spdeDown buttons to see the result:</p>

   <span id="box">This is Box</span>
   <button id="hide">spdeUp </button>
   <button id="show">spdeDown </button>
</body>
</html>

jQuery Effect - Toggle with Spding

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

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

This method gives the same functionapty what we can have using toggle() method, but additionally, it gives spde up and spde down effect while toggpng 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 milpseconds 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").cpck(function(){
         $("#box").spdeToggle(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>Cpck on the Toggle Box button to see the box toggpng:</p>

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

Try using jQuery $(selector).toggle(), $(selector).spdeToggle() and $(selector).fadeToggle() methods to understand the minor difference among these three methods.

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.

jQuery - Effects

jQuery Effect - Hiding Elements

Example

jQuery Effect - Show Elements

Example

jQuery Effect - Toggle Elements

Example

jQuery Effect - Fading Elements

Example

jQuery Effect - Toggle with Fading

Example

jQuery Effect - Spding Elements

Example

jQuery Effect - Toggle with Spding

Example

jQuery Effects Reference

友情链接