JQuery Fading Methods

You often worried about smooth fade effect of an element. This problem can be sort out jQuery Fade Method. There are total 4 cases. In this you will learn how we can add fading effects.
Let's start.

jQuery has four fade Methods:-

1) fadeOut()
2) fadeIn()
3) fadeToggle()
4) fadeTo()

1) Jquery fadeOut() Method

jQuery fade out method is used to fadeout a element

HTML:-

                 <div class="box"><button>Click</button></div>
        

        
CSS:-
 

                 .box{
            height:200px;
            width:300px;
            background:#000;
  }
        

        
 
 set some height,width and backgroud of box by using above css.
 
 Remember:-
 First of all include the JQuery library file just above closing of  body tag.The code are given below:

                 <script src="query-1.11.3.min.js" type="text/javascript"></script>
        

        
    You can get the library file from www.jquery.com    
    
 
 Case-I:- simple fadeout
 
  jQuery->
 

                    <script>
      $(document).ready(function(){
            $('button').click(function(){
              $(".box").fadeOut();
            });
    });
  </script>
        

 
  In this case by clicking on button the box will simple fade out.
  Case-II:- slow fadeout            
    
    jQuery->

                   <script>
      $(document).ready(function(){
            $('button').click(function(){
              $(".box").fadeOut("slow");
            });
    });
  </script>
        

  In this case by clicking on button the box will fade out slowly
    
  Case-III:- fast fadeout            
    
    jQuery->

                 <script>
      $(document).ready(function(){
            $('button').click(function(){
              $(".box").fadeOut("fast");
            });
    });
  </script>
        

 
  In this case by clicking on button the box will fade out fast
 
  CaseIV:- set time for fadeout
 
  jQuery->

                  <script>
      $(document).ready(function(){
            $('button').click(function(){
              $(".box").fadeOut("5000");
            });
    });
  </script>
        

  We can also set time for the fadeout manually. By using above code
    
 
 2) Jquery fadeIn() Method
jQuery fade In method is used to fadein a element

There is only changes in jQuery.Rest of the code will remain same

 
 Case-I:- simple fadein
 
  jQuery->

                 <script>
      $(document).ready(function(){
            $('button').click(function(){
              $(".box").fadeIn();
            });
    });
  </script>
        

        
  In this case by clicking on button the box will simple fade In.
  Case-II:- slow fadein            
    
    jQuery->

                  <script>
      $(document).ready(function(){
            $('button').click(function(){
              $(".box").fadeIn("slow");
            });
    });
  </script>
        

        
 
  In this case by clicking on button the box will fade In slowly
    
  Case-III:- fast fadein            
    
    jQuery->
 

                 <script>
      $(document).ready(function(){
            $('button').click(function(){
              $(".box").fadeIn("fast");
            });
    });
  </script>
        

  In this case by clicking on button the box will fade In fast
 
  CaseIV:- set time for fadein
 
  jQuery->
 

                 <script>
      $(document).ready(function(){
            $('button').click(function(){
              $(".box").fadeIn("5000");
            });
    });
  </script>
        

  We can also set time for the fadein manually.By using above code
 
    
 3) jQuery fadeToggle() Method
jQuery fade Toggle method is used to fadein and fadeout both.It means the if element is showing
it will automatically do the the functioning of fadeout and if element is hide it will do the
functioning of fadein.

 
 Case-I:- fadeToggle

  jQuery->

                 <script>
      $(document).ready(function(){
            $('button').click(function(){
              $(".box").fadeToggle();
            });
    });
  </script>
        

  In this case by clicking on button the box if box css property will set to display:none.Then above jQuery will do the functioning of fadeIn().
  and if box are showing then it performing functioning of fadeout().If you want to give box property to display none.
  You can the the following code into your css.
 
  CSS:-

                  .box{
      display:none;
  }
        

        
4) jQuery fadeTo() Method
jQuery fade To method is used to fadeto a element up to a certain limit.

 
 Case-I:- fadeTo

  jQuery->

                 <script>
      $(document).ready(function(){
            $('button').click(function(){
             $(".box").fadeTo("slow", 0.15);
            });
    });
  </script>
        

        
 the above code will fade the box up to 0.15 opacity.After that it will note fade.
 
That's it.

you are now learnt the complete jQuery fading Methods.