Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

jQuery Fade

jQuery Fade

With jQuery Fade effect you can fade in or fade out an element with the help of fadeIn() and fadeOut() functions.



jQuery fadeIn()

It is used to fade in hidden element.


Syntax

$(selector).fadeIn(speed,callback);


Code Explanation

  • It takes speed parameter as an optional to define what speed the hide and show effect takes place it takes values like "slow", "fast" or milliseconds.
  • It takes callback as an optional parameter you can give function that is executed after the completion of effect.

Example of fadeIn()

$("#para1").click(function(){
$("#para2").fadeIn();
});



jQuery fadeOut()

It is used to fade out visible the element.


Syntax

$(selector).fadeOut(speed,callback);


Code Explanation

  • It takes speed parameter as an optional to define what speed the hide and show effect takes place it takes values like "slow", "fast" or milliseconds.
  • It takes callback as an optional parameter you can give function that is executed after the completion of effect.


Example of fadeOut()

$("#para1").click(function(){
$("#para2").fadeOut();
});



jQuery fadeToggle()

jQuery fadeToggle() effect is used to toggle between fadeIn() and fadeOut() automatically


Syntax

$(selector).fadeToggle(speed,callback);


Code Explanation

  • It takes speed parameter as an optional to define what speed the hide and show effect takes place it takes values like "slow", "fast" or milliseconds.
  • It takes callback as an optional parameter you can give function that is executed after the completion of effect.


Example of fadeToggle()

$("#para1").click(function(){
$("#para2").fadeToggle();
});



jQuery fadeTo()

jQuery fadeTo() effect is used to fade an element at a given opacity or transparency


Syntax

$(selector).fadeTo(speed,opacity,callback);


Code Explanation

  • It takes speed parameter as an optional to define what speed the hide and show effect takes place it takes values like "slow", "fast" or milliseconds.
  • It takes the value of opacity between 0 to 1
  • It takes callback as an optional parameter you can give function that is executed after the completion of effect.


Example of fadeTo()

$("#para1").click(function(){
$("#para2").fadeT0(0.6);
});
PreviousNext

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH