Loading Please Wait...

Logo Lynxsia IT Solutions

jQuery Effects Fade

JQ Effects Fade

With jQuery you can fade elements in and out of visibility.

The fadeIn() Method

The fadeIn() method is used to fade in a hidden element.

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

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after the fading completes.

					 
        
          $("button").click(function(){
            $("#div1").fadeIn();
            $("#div2").fadeIn("slow");
            $("#div3").fadeIn(3000);
          });
        
      
The fadeOut() Method

The 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 can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after the fading completes.

					 
        
          $("button").click(function(){
            $("#div1").fadeOut();
            $("#div2").fadeOut("slow");
            $("#div3").fadeOut(3000);
          });
        
      
The fadeToggle() Method

The fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

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

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after the fading completes.

					 
        
          $("button").click(function(){
            $("#div1").fadeToggle();
            $("#div2").fadeToggle("slow");
            $("#div3").fadeToggle(3000);
          });
        
      
The fadeTo() Method

The fadeTo() method allows fading to a given opacity (value between 0 and 1).

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

The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).

The optional callback parameter is a function to be executed after the function completes.

					 
        
          $("button").click(function(){
            $("#div1").fadeTo("slow", 0.15);
            $("#div2").fadeTo("slow", 0.4);
            $("#div3").fadeTo("slow", 0.7);
          });
        
      

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Contact Us
Ads
Logo
Lynxsia IT Solutions

We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..

Kotwali Road, Chhiptehri, Banda, 210001, UP, India

Copyright © 2022, Lynxsia IT Solutions, All rights reserved