Home

jQuery Effects And Animations

Fade In / Fade Out

jQuery Effects: fadeIn, fadeOut and fadeToggle

SYNTAX: $(“CSS selector”).fadeIn(speed), $(“CSS selector”).fadeOut(speed), and $(“CSS selector”).fadeToggle(speed)

There are three additional jQuery effects that are used by many developers/designers: fadeIn, fadeOut and fadeToggle. The fade methods change the opacity (not the visibility) of an object over time. Their functionalities (e.g., speed, toggle, etc.) works similar to the show/hide and toggle effects (See Show / Hide section for detail).  However, unlike the show/hide and toggle methods which show or hide an object immediately if there is no speed value parameter, the fade methods will default to the slow speed value of 400 ms (0.4 second) which makes sense since you need TIME to fade an object in or out unlike the show /  hide methods which can happen immediately.

1. Copy the Show / Hide button code and paste it three additional times on the next line and modify the code to read:
   
   <button id = "showhideBoxButton">Show / Hide Box</button><br>
   <button id = "fadeInBoxButton">Fade In Box</button><br>
   <button id = "fadeOutBoxButton">Fade Out Box</button><br>
   <button id = "fadeToggleBoxButton">Fade Toggle Box</button><br>
   
   
2. Copy the Show / Hide Box code and paste it three times below the current code and modify the code to read:
   
   $("#showhideBoxButton").click(function(){
   $("#myBox").toggle();
   }); // end of showhideBoxButton click event handler
   
   $("#fadeInBoxButton").click(function(){
   $("#myBox").fadeIn();
   }); // end of fadeInBoxButton click event handler
   
   $("#fadeOutBoxButton").click(function(){
   $("#myBox").fadeOut();
   }); // end of fadeOutBoxButton click event handler
   
   $("#fadeToggleBoxButton").click(function(){
   $("#myBox").fadeToggle();
   }); // end of fadeToggleBoxButton click event handler
   
   
3. Save the file and test the page in a browser by first clicking on the Hide Box button and then click on the Fade In Box button. You should see the red box fade in. Then click on the Fade Out Box button and the Fade Toggle button to see the red box fade out or toggle its fade in or out when the Fade Toggle Button is pressed repeatably.
   
   Optional: Like the Show / Hide Box buttons, you can delete the Fade In Box and Fade Out Box buttons as they are no longer needed.