.fadeOut()

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()

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()

fadeTo is used if we wish our elements to become blur. So, it goes only upto the specified value of opacity.

.fadeToggle()

Like toggle(), it toggles the state of the element. Lets see an example for all of them.

Fade in all

Toggle all

Toggle to opacity (0.2)

Fade simply
Fade in 3 seconds
I am in hurry
I will shout
Fade all
Fade 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.

Login to comment

<<< Wanna review

Continue >>>