10
X

jQuery’s .fade() Method

In jQuery, there several different methods that can be used to make an element fade in and out of view. They are: .fadeIn(), .fadeoOut(), .fadeToggle(), and .fadeTo().

.fadeIn() and .fadeOut() are pretty self explanatory. When triggered, it is used to have items either fade in or fade out, respectively. .fadeToggle() is used to toggle between .fadeIn() and .fadeOut(), so when .fadeToggle() is triggered the first time, the elements will fade out, and when it’s triggered again, they’ll fade in. If it’s triggered a third time, the elements will fade back out. .fadeTo() is used to partially fade elements out. With .fadeTo() you can control the opacity level that the elements fade to.

Here’s an example of how you would use .fadeOut() in context:

Continue Reading Below
$(“.main”).click(function(){
$(this).fadeOut(“slow”);
})

When the code in the above example is executed, the .main element will fade out at a slow rate when it’s clicked. The two parameters that the .fadeOut() method takes are speed (could be in milliseconds or in fixed values like slow), and a callback, which gives you the option to insert another function to be executed once the fade is complete. .fadeIn() and .fadeToggle() take the same parameters.


Leave a Comment

IMPORTANT:

  • If you wish to post code examples, please wrap them in <code> tags.
  • Multi-line code should be wrapped in <pre><code> </code></pre>
  • Use &lt; instead of < and &gt; instead of > in the examples themselves. Otherwise, you could lose part of the comment when it's submitted.