jQuery Span fadeOut method in ASP.NET

Today I am going to explain you the jQuery fadeOut() method used to animates or changes the opacity, for matched elements, from visible to hidden termed as fading effect.
  • 2203
 

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

  SpanFade1.gif

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. 
 

SpanFade2.gif
 

Search more modifiers and enjoy working on jQuery.


 

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.