Sometimes we want an image, control or element in a page to fade in and out of visibility .With jQuery it can be done easily. Below are examples of fade in and out method for a div element:
Fade In: fadeIn() method is used to fade in a hidden element.
Syntax : $(element id).fadeIn(fading speed,callback);
Here fading speed is optional which specifies the duration of the effect. It can take the values: "slow", "fast", or numeric speed value in milliseconds and callback parameter is also optional which is a function to be executed after the fading completes. For eg :
$("#div1").fadeIn();
$("# div1").fadeIn("slow");
$("# div1").fadeIn(5000);
Fade Out: fadeOut() method is used to fade out a visible element.
Syntax : $(element id).fadeOut(fading speed,callback);
Here also fading speed is optional which specifies the duration of the effect. It can take the values: "slow", "fast", or numeric speed value in milliseconds and callback parameter is also optional which is a function to be executed after the fading completes. For eg :
$("#div1"). fadeOut ();
$("# div1"). fadeOut ("slow");
$("# div1"). fadeOut (5000);
Fade Toggle : fadeToggle() method toggles between the fadeIn() and fadeOut() methods. That means if element is hidden it makes the element visible and if element is visisble, fadeTogggle() hides the element.
Syntax : : $(element id).fadeToggle(fading speed,callback);
Where fading speed and callback are same as above (in fadeIn() and fadeout()). For eg:
$("#div1"). fadeToggle ();
$("# div1"). fadeToggle ("slow");
$("# div1"). fadeToggle (5000);
0 Comment(s)