w3resource

jQuery Effect: Animates all hidden elements to show slowly

jQuery Effect: Exercise-13 with Solution

Animates all hidden elements to show slowly.
Sample Data :

HTML code:

<body>
<button>Show it</button>
<p style="display: none">Hello</p>
</body>

Solution:

HTML Code :


<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
   <style>
 p{
    background: #ECEDF3;
 }
  </style>
  <meta charset="utf-8">
  <title>Animates all hidden elements to show slowly</title>
</head>
<body>
<button>Show it</button>
<p style="display: none">Hello</p>
</body>
</html>

JavaScript Code :


$( "button" ).click(function() {
  $( "p" ).show( "slow" );
});

Note :
In jQuery show( [duration ] [, complete ] ) method is used to display the matched elements. It has the following parameters :

  • duration : A string or number determining how long the animation will run. [Type- Number or String]
  • complete : A function to call once the animation is complete. [Type: Function()]

Live Demo:

See the Pen jquery-effect-exercise-13 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Toggle animation on and off.
Next: Animates all divs to slide down and slide up.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.