Net-informations.com
SiteMap  | About    

jQuery Fading Effects



jQuery has several methods that can be used to adjust the opacity of elements .

jQuery has the following fade methods:

  1. fadeIn() - Display the matched elements with fade in effect.

  2. fadeOut() - Hide the matched elements with fade out / transparent effect.

  3. fadeToggle() - Toggles between the fadeIn() and fadeOut() methods.

  4. fadeTo() - Fading the matched elements to certain opacity.

Syntax

Parameters

  1. speed - Optional values in milliseconds, "slow", "normal", and "fast".

  2. opacity - Required attribute that specifies the opacity to fade to, between 0.00 and 1.00

  3. easing - Indicates which easing function (swing/linear) to use for the transition

  4. callback - An optional function to run after the method is completed

jQuery fadeIn()/fadeOut() methods

You can use the jQuery fadeIn() and fadeOut() methods to display or hide the HTML elements by gradually increasing or decreasing their opacity.

run this source code Try it Yourself
FadeIn/FadeOut


Full Source

Like other jQuery effects methods, you can optionally specify the duration or speed parameter for the fadeIn() and fadeOut() methods to control how long the fading animation will run. If you want to specify the speed, you can simply pass in a string of either 'slow', 'normal', or 'fast' . If you'd rather be very specific, that is an option as well. Simply pass in a numeric value, and that value will be in milliseconds.

jQuery fadeTo() Method

jQuery fadeTo() method is used to fading the matched elements to certain opacity.

Syntax

The required opacity parameter specifies the final opacity of the target elements that can be a number between 0 and 1 . The duration or speed parameter is also required for this method that specifies the duration of the fade to animation.

run this source code Try it Yourself




Full Source

jQuery fadeToggle() Method

The jQuery fadeToggle() method perform both the operation fade in and fade out by increasing or decreasing the opacity.

Syntax

When triggered on an element, the element's display style property is set to none once the opacity reaches 0.

run this source code Try it Yourself

Full Source









net-informations.com (C) 2018    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.