The jQuery fadeOut() method gradually animates or
changes the opacity, for matched elements, from visible to hidden termed as
fading effect. The displaystyle property is set to none, when the opacity
reaches at 0 result as the element will fade out from the page.
Here is an example of fading out spans from a
section when you click on it, lets quickly jump to the solution.
Code Snippets
<html>
<head>
<title>jQuery
Span fadeOut</title>
<style>
span { cursor:pointer;
}
span.highlight { background:yellow;
}
div { display:inline;
color:blue; }
</style>
<script src="jquery.js"></script>
</head>
<body>
<h3 style="font-family:
Verdana; font-size:
medium; font-weight:
bold; background-color:
#F0F0F0; height:
22px;">
Just find out the modifiers and click to fade it -<div></div></h3>
<hr style="color:
black">
<p style="font-family:
Verdana; font-size:
small; background-color:
#F0F0F0; height:
87px;">
Success is achieved
when a <span>stretch</span>
goal is met
overcoming failures,
<span>problems</span>
and difficulties by
conscious effort and by
application of capabilities,
resources and methods. It
is to be <span>differentiated</span>
from luck,
chance and doing what
comes naturally without effort.
</p>
<script>
$("span").click(function
() {
$(this).fadeOut(1000,
function () {
$("div").text("The
word " +"'" + $(this).text()
+ "' has faded from the above paragraph!");
$(this).remove();
});
});
$("span").hover(function
() {
$(this).addClass("highlight");
},
function () {
$(this).removeClass("highlight");
});
</script>
</body>
</html>
Output
Now move the cursor at each word of the paragraph
to find out the word to be modified. When a word changes its background color to
yellow just click on it, you will see that the word will fade out and a message
will display in the header section as shown below.
Search more modifiers and enjoy working on jQuery.