FadeOut Method

JQuery fadeOut() method is used to hide a image or div with fade effect.

( fadeOut() )

<script> $(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 }) </script>

Click on the button below

Collapse Box (Click Here) Div 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
Collapse Box (Click Here)Div 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
Collapse Box (Click Here) Div 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
Collapse Box (Click Here) Div 4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

fadeIn FadeOut

JQuery slideIn() method is used to show a image or div with fade effect.

( fadeIn() )

<script> $(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 }) </script>

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

fadeToggle Method

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

( slideDown() )

<script> $(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 }) </script>

Click on the button below

Collapse Box (Click Here) Div 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
Collapse Box (Click Here)Div 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
Collapse Box (Click Here) Div 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
Collapse Box (Click Here) Div 4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren