Fading Effect in jQuery:

With the help of Fade methods you can fade in and out the visibility of a HTML element.

There are four types of fading in jQuery

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

The fadeIn() method in jQuery:

The fadeIn() method in jQuery is used to fade in the HTML hidden element.

Syntax:

          $(selector).fadeIn(speed,callback);

There are two parameters in syntax we passed

  • Speed: The speed parameter specifies the time or interval or duration of the effect. It take following values: “slow”, “fast” and “milliseconds”
  • Callback: The callback parameter will executed after the fading completes.

Example:

The fadeOut() method in jQuery:

The fadeOut() method in jQuery is used to fade out the HTML visible element.

Syntax:

          $(selector).fadeOut(speed,callback);

There are two parameters in syntax we passed

  • Speed: The speed parameter specifies the time or interval or duration of the effect. It take following values: “slow”, “fast” and “milliseconds”
  • Callback: The callback parameter will executed after the fading completes.

Example:

The fadeToggle() method in jQuery:

The fadeToggle() method in jQuery is used to switch or toggles between fadeIn() and fadeout() methods.

That means if the HTML elements are fade out so this function will fade in them.

And if the HTML elements are fade in so this function will fade out them

Syntax:

          $(selector).fadeToggle(speed,callback);

There are two parameters in syntax we passed

  • Speed: The speed parameter specifies the time or interval or duration of the effect. It take following values: “slow”, “fast” and “milliseconds”
  • Callback: The callback parameter will executed after the fading completes.

Example:

The fadeTo() method in jQuery:

The fadeTo() method in jQuery is used to give opacity to the HTML element between 0 and 1.

 Syntax:

          $(selector).fadeTo(speed,opacity,callback);

There are two parameters in syntax we passed

  • Speed: The speed parameter is required and it specifies the time or interval or duration of the effect. It take following values: “slow”, “fast” and “milliseconds”
  • Opacity: Is also the required parameter.
  • Callback: The callback parameter will executed after the fading completes.

Example:

5 responses to “Fading Effect in jQuery”

  1. Erin Kuhnen says:

    some times its a pain in the ass to read what website owners wrote but this web site is really user pleasant! .

  2. Phil Jarmon says:

    I not to mention my friends were found to be looking through the good tactics from your website then then came up with a terrible feeling I never expressed respect to the web blog owner for them. My guys were definitely as a consequence warmed to study all of them and have clearly been enjoying those things. Many thanks for simply being indeed thoughtful and then for figuring out this form of incredibly good things most people are really wanting to be aware of. My sincere regret for not expressing appreciation to sooner.

  3. Yoest says:

    Lovely just what I was looking for.

  4. Dev Stiffen says:

    you’ve got a great weblog right here! would you like to make some invite posts on my weblog?

  5. Darrin Paarmann says:

    Nice post. I was checking continuously this blog and I am impressed! Very useful info specially the last part 🙂 I care for such information much. I was looking for this certain information for a very long time. Thank you and good luck.

Leave a Reply

Your email address will not be published. Required fields are marked *