fadeOut simply fades the element on which it is triggered. It slowly disappears from the document. If no argument is passed to the function, it goes away instantly. Else if time in ms is provided, it takes the passed value of time to disappear. It is similar to hide() as discussed earlier.
fadeIn brings the element back on the stage when it is triggered on a particular hidden object. If no argument is passed to the function, it appears instantly. Else if time in ms is provided, it takes the passed value of time to appear. It is similar to show() as discussed earlier.
fadeTo is used if we wish our elements to become blur. So, it goes only upto the specified value of opacity.
Like toggle(), it toggles the state of the element. Lets see an example for all of them.
Fade simplyFade in 3 secondsI am in hurryI will shoutFade allFade one by one from top
Fade in all Toggle all Toggle to opacity (0.2)
About the code, its the same as the previous one on this page. Only hide() has been replaced by fadeOut and show by fadeIn(), toggle by fadeToggle and a new fadeTo which causes the elements to fade to a particualr value of opacity.
After these fading animation effects, lets see some more amazing jquery effects like sliders.