Fade effects are simple yet attractive. They add simplicity to transitions and changes in the content of a web page adding to the elegance of a web page. Here I provide my choice of the best jQuery Fade Effect Plugins.

1. Creating a Mouseover Fade Effect with jQuery

I am going to make a black and white image fade into a color image. To achieve this effect I am going to introduce the animate function. There are tons of possibilities in regards to jQuery's animate function, but for this tutorial, I'm going to keep it simple by just using it to do one thing.

2. jQuery To Fade Effects tabs

In this JQuery tutorial we will develop a program  to make Fade Effect  tabs.

3. Fading color effect for inline text links using jQuery

Here's a simple UX trick that can be easily implemented into your web sites. With a few lines of jQuery it will make your text links fade to another color on rollover. How? Read on.

4.  FadeIn FadeOut html text div effect using jQuery.

Let us see a simple trick to FadeIn and FadeOut a text using jQuery. This code can be easily generalized for any html component. FadeIn works by changing the visibility of any text/div/html component gradually from transparent to solid and vica versa for FadeOut. For different browsers there are different ways to achieve this. Using jQuery we can avoid cross browser issues and can directly implement FadeIn/FadeOut effect.

5. jQuery Accordion With Fade Effect

I have seen a number of nice jQuery accordion menu’s around, but i couldn’t seem to come across any that had a nice fade in fade out animation when users navigated around them, sooo, i thought i would put one together myself.

6. How to create your own inner fade effect with jQuery

The concept for an inner fade is much troublesome than a normal fade effect in jQuery. A normal fade effect in jQuery will only required the fadeIn,fadeOut or fadeTo method to be called by the chaining process. Inner fade effect will require an additional step which is to arrange the images into a stack. Similar to the shuffle concept but we will just have to use the built-in feature of jQuery, animate to complete this tutorial. Imagine you have a deck of cards, each touch will make the card slowly fade till disappear and display the next card. So, what happen to the disappeared card? Similarly, we set the displayed index to a lower value and hide it behind of the deck of cards. So when the deck of cards completely disappeared, it will fade to the start card again!

7. Creating a fading header in jQuery

Since I’ve gotten lots of emails asking me how I created the fading header graphic for Bits and Pixels I’m going to write a tutorial explaining how created the effect. I’ll be creating the effect using some basic XHTML and CSS and some unobtrusive Javascript, using the jQuery library, for the effect itself.

8. Changing images with JQuery and the fade effect

It took me a bit of digging to figure out how to fade out a picture, change the src, then fade it back in. I started out trying to use Scriptaculous but I got stuck trying to get the queue setup to wait until the image was faded out to change the src. I ended up using jQuery which also gave me a bonus, the solution is unabtrusive.

9. jQuery fade-in spoiler revealer: The failsafe, progressively enhanced version

Hats off, then, to Chris Coyier of tutorial site CSS-Tricks for his recent post on using jQuery to create a Fade-in Spoiler Revealer for use on websites. My only reservation about Coyier's technique was its reliance on JavaScript, and only JavaScript, to hide spoiler-laden content. With RSS and mobile browsing on the rise, lots of people read content in user-agents without JavaScript support. Shouldn't we try to protect them, too? I commented to this effect on the original article, then realized that I should just write the code myself as proof of concept.

10. Learning jQuery: Fading Menu – Replacing Content

Instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.

11. jQuery fade and slide toggle plugin

The jquery slidetoggle() is great, but one thing I always thought it was missing is some opacity fading in the sliding animation. When I was coding this iteration of position absolute I wanted this kind of animation so I went there and coded it. This is a very small plugin, but I still find the effect cooler than a regular sliding.