♦ jQuery Fade
♣ About jQuery Fade
HTML elements can be faded-out or faded-in.The elements are hidden/shown in smooth transition.
♣ Example1: jQuery fadeOut()
HTML element fades out with fadeOut() method, meaning if a particular element is being displayed then that element can be made hidden with smooth vanishing.Below is the representation of jQuery fadeOut() Syntax.
Basic Syntax
$(selector).fadeOut(speed,callback);
speed: time for fading out, can be slow,speed or millisecond(s).
callback: funtion calling after fading out.
In this example, fadeOut() method is illustrated.callback: funtion calling after fading out.
Example
Input:
Output:
♣ Example2: jQuery fadeIn()
HTML element fades in with fadeIn() method, meaning if a particular element is hidden then that element can displayed with smooth appearance.Below is the representation of jQuery fadeIn() Syntax.
Basic Syntax
$(selector).fadeIn(speed,callback);
speed: time for fading in, can be slow,speed or millisecond(s).
callback: funtion calling after fading in.
In this example, fadeIn() method is illustrated.callback: funtion calling after fading in.
Example
Input:
Output:
♣ Example3: jQuery fadeToggle()
HTML element can be toggled between with hidden and shown in smooth transition with fadeToggle() method.Below is the representation of jQuery fadeToggle() Syntax.
Basic Syntax
$(selector).fadeToggle(speed,callback);
speed: time for fading in or fading out, can be slow,speed or millisecond(s).
callback: funtion calling after fading in or fading out.
In this example, fadeToggle() method is illustrated.callback: funtion calling after fading in or fading out.
Example
Input:
Output:
♣ Example4: jQuery fadeTo()
fadeTo() method changes the opacity of the HTML element.Allowed range is 0 to 1.
Below is the representation of jQuery fadeTo() Syntax.
Basic Syntax
$(selector).fadeTo(speed, opacity);
speed: time for fadingTo action, can be slow,speed or millisecond(s).
opacity: 1 for full display, 0 for hide
In this example, fadeTo() method is illustrated.opacity: 1 for full display, 0 for hide
Example
Input:
Output: