codeGK
Code it ALL
jQuery Fade - CodeGK
♦ 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.
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.
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.
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.
Example
Input:
Output:
Prev_LessonNext_Lesson