jQuery Effect: Animates a paragraph to fade to an specified opacity

Last update on August 19 2022 21:50:45 (UTC/GMT +8 hours)

jQuery Effect : Exercise-6 with Solution

Animates a paragraph to fade to an specified opacity (complete the animation within 500 milliseconds).
Sample Data :

HTML code:

<body>
<p> Click this paragraph to see it fade.</p>
</body>

Solution:

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Animates a paragraph to fade to an specified opacity</title>
</head>
<body>
<p>This is original paragraph. </p>
<p>Click me to see it fade.</p>
</body>
</html>

JavaScript Code:

$( "p:last" ).click(function() {
  $( this ).fadeTo( "slow", 0.40 );
});

Note :
In jQuery .fadeTo( duration, opacity [, complete ] ) method is used to adjust the opacity of the matched elements. It has the following parameters :

duration : A string or number determining how long the animation will run. [Type- Number or String]
opacity : A number between 0 and 1 denoting the target opacity. [Type: Number]
complete : A function to call once the animation is complete. [Type: Function()]

Live Demo:

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

Contribute your code and comments through Disqus.

Previous: Fade in and fade out all division elements.
Next: Write a jQuery Code to get a single element from a selection.