w3resource

jQuery Effect: Animates all shown paragraphs to hide slowly

jQuery Effect : Exercise-10 with Solution

Animates all shown paragraphs to hide slowly (complete the animation within specified time).

Sample Data :

HTML code:

<body>
<p>User ID : <input type="text" id='field1'></p>
<p>Password : <input type="password" id='field2'>
</body>

Solution :

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <style>
	 p {
	   background: #EEF4ED;
	   font-weight: bold;
	    }
  </style>
  <meta charset="utf-8">
  <title>Animates all shown paragraphs to hide slowly </title>
</head>
<body>
<button>Click to hide the following paragraphs</button>
<p>jQuery</p>
<p>jQuery Exercises</p>
</body>
</html>

JavaScript Code :

$( "button" ).click(function() {
  $( "p" ).hide(3000);
});

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

  • duration (default: 400) : A string or number determining how long the animation will run. [Type: Number or String]

Go to:


PREV : Finish a currently running animation.
NEXT : Run an animation with less frames.

Live Demo:

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


Contribute your code and comments through Disqus.

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.