Jquery Fade
jQuery Effects - Fading
With jQuery yous tin sack fade elements inwards too out of visibility.
Click to fade in/out panel
Examples
jQuery fadeIn()Demonstrates the jQuery fadeIn() method.
jQuery fadeOut()
Demonstrates the jQuery fadeOut() method.
jQuery fadeToggle()
Demonstrates the jQuery fadeToggle() method.
jQuery fadeTo()
Demonstrates the jQuery fadeTo() method.
jQuery Fading Methods
With jQuery yous tin sack fade an chemical cistron inwards too out of visibility.jQuery has the next fade methods:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() Method
The jQuery fadeIn() method is used to fade inwards a hidden element.Syntax:
$(selector).fadeIn(speed,callback);
The optional speed parameter specifies the duration of the effect. It tin sack accept the next values: "slow", "fast", or milliseconds.The optional callback parameter is a component division to live on executed afterward the fading completes.
The next instance demonstrates the fadeIn() method amongst dissimilar parameters:
Example
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() Method
The jQuery fadeOut() method is used to fade out a visible element.Syntax:
$(selector).fadeOut(speed,callback);
The optional speed parameter specifies the duration of the effect. It tin sack accept the next values: "slow", "fast", or milliseconds.The optional callback parameter is a component division to live on executed afterward the fading completes.
The next instance demonstrates the fadeOut() method amongst dissimilar parameters:
Example
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() Method
The jQuery fadeToggle() method toggles betwixt the fadeIn() too fadeOut() methods.If the elements are faded out, fadeToggle() volition fade them in.
If the elements are faded in, fadeToggle() volition fade them out.
Syntax:
$(selector).fadeToggle(speed,callback);
The optional speed parameter specifies the duration of the effect. It tin sack accept the next values: "slow", "fast", or milliseconds.The optional callback parameter is a component division to live on executed afterward the fading completes.
The next instance demonstrates the fadeToggle() method amongst dissimilar parameters:
Example
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() Method
The jQuery fadeTo() method allows fading to a given opacity (value betwixt 0 too 1).Syntax:
$(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the effect. It tin sack accept the next values: "slow", "fast", or milliseconds.The required opacity parameter inwards the fadeTo() method specifies fading to a given opacity (value betwixt 0 too 1).
The optional callback parameter is a component division to live on executed afterward the component division completes.
The next instance demonstrates the fadeTo() method amongst dissimilar parameters:
Example
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
Comments
Post a Comment