JQuery FadeOn FadeOut

JQuery fadeIn and fadeOut methods

Jquery fade includes 4 methods to add fade effects. Fade effects increases or decreases opacity of an element with time. Here are some examples of JQuery fadeIn and fadeOut methods.

Jquery FadeOut

JQuery fadeOut() method is used to hide a image or div with fade effect. FadeOut method decrease width, height and opacity with transition.

Click the link below

Collapse Box (Click Here) Div 1
Collapse Box (Click Here)Div 2
Collapse Box (Click Here) Div 3
Collapse Box (Click Here) Div 4 


$(document).ready(function(){
    $('.button1').click(function(){
        $('.box1').fadeOut();           
    })                                   // for first div with default speed
		
		
    $('.button2').click(function(){
        $('.box2').fadeOut('slow');  
    })                                  // for second div with slow speed
		
		
    $('.button3').click(function(){
        $('.box3').fadeOut('fast');
    })                                  // for third div with fast speed
		
    $('.button4').click(function(){
        $('.box4').fadeOut(1000);
    })                                  // for Forth div with 1 second speed
})

fadeIn FadeOut

JQuery slideIn() method is used to show a image or div with fade effect by increasing and decreasing opacity.

Click on the button below

Collapse Box (Click Here) Div 1
Collapse Box (Click Here)Div 2
Collapse Box (Click Here) Div 3
Collapse Box (Click Here) Div 4 

$(document).ready(function(){
    $('.button1').click(function(){
        $('.box1').fadeIn();           
    })                                   // for first div with default speed
			
    $('.button2').click(function(){
        $('.box2').fadeIn('slow');  
    })                                  // for second div with slow speed
			
    $('.button3').click(function(){
        $('.box3').fadeIn('fast');
    })                                  // for third div with fast speed
		
    $('.button4').click(function(){
        $('.box4').fadeIn(1000);
    })                                  // for Forth div with 1 second speed
})

fadeToggle Method

JQuery fadeToogle() method can give both fadeOut and fadeIn effects alternately.

Click on the button below

Collapse Box (Click Here) Div 1
Collapse Box (Click Here)Div 2
Collapse Box (Click Here) Div 3
Collapse Box (Click Here) Div 4 

$(document).ready(function(){
    $('.button1').click(function(){
        $('.box1').fadeToggle();           
    })                                   // for first div with default speed
		
		
    $('.button2').click(function(){
        $('.box2').fadeToggle('slow');  
    })                                  // for second div with slow speed
		
		
    $('.button3').click(function(){
        $('.box3').fadeToggle('fast');
    })                                  // for third div with fast speed
		
    $('.button4').click(function(){
        $('.box4').fadeToggle(1000);
    })                                  // for Forth div with 1 second speed
})