Did you find this useful?
Socialize it today.


jQuery Fading Effects

Saturday, July 07, 2012

jQuery has several methods that can be used to adjust the opacity of elements. These methods are just a few of the variety of methods that can be used to create animation effects. The use of jQuery among web designers continues to be growing in popularity. With regard to fading techniques the typical methods used are fadeIn(), fadeOut(), fadeTo(), and fadeToggle().


Syntax

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
$(selector).fadeToggle(speed,easing,callback)


ParameterDescription
speedOptional values in milliseconds, "slow", "normal", and "fast".
opacityRequired attribute that specifies the opacity to fade to, between 0.00 and 1.00
easingIndicates which easing function (swing/linear) to use for the transition
callbackAn optional function to run after the method is completed


HTML Example

We will use the following HTML for the examples listed below.


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="fadeIn.png" />  
<img id="img2" src="fadeOut.png" /> 
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>


FadeIn / FadeOut

In the following example, we will use the click event to trigger the fadeIn() and fadeOut() method on the div element adjacent to the images. Try it yourself by clicking on the In and Out icons below.


<script type="text/javascript">
 $("#img1").click(function(){
   $("div").fadeOut(); 
   });
 $("#img2").click(function(){
   $("div").fadeIn(); 
   });
</script> 


out in
Click the icons to fade in or fade out this div element.


FadeTo

In the following example, we will use the click event to trigger the fadeTo() method to apply this fading effect to the adjacent div element. Try it yourself by clicking on the In and Out icons below.


<script type="text/javascript">
 $("#img1").click(function(){
   $("div").fadeTo("normal", 0.20); 
   });
</script> 


go
Click the icon to apply the fadeTo effect to this document.


FadeToggle

The fadeToggle() method animates the opacity of the matched elements. When triggered on an element, the element's display style property is set to none once the opacity reaches 0. Try it yourself by clicking on the In and Out icons below.


<script type="text/javascript">
 $("#img1").click(function(){
   $("div").fadeToggle("slow", "linear"); 
   });
</script> 


toggle
Click the icon to apply the fadeToggle effect.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Pro jQuery JavaScript and jQuery: The Missing Manual Professional jQuery