Home Ajax Jquery jQuery Fading Method
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

jQuery Fading Method

Advertisement
jQuery Fading Method: jQuery .finding() method illustrates how to use the .finding() method in jQuery to fade in and out the HTML element.

jQuery fadind () methods used to fade in and out the elements visibility. jQuery offers various methods like fadeIn(), fadeOut(), fadeToggle() and fadeTo() methods to adjust and opacity of elements.

Fade in Methods are as follows:

  • .fadeIn(): jQuery .fadeIn() method display the matched elements by fading them to opaque.
  • .fadeOut(): jQuery .fadeOut() method hide the matched elements by fading them to transparent.
  • .fadeTo(): jQuery .fadeTo() method adjust the opacity of the matched elements.
  • .fadeToggle(): jQuery .fadeToggle() method display or hides the matched elements by animating their opacity.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>

<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>
Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: December 30, 2013

Ask Questions?    Discuss: jQuery Fading Method  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com