How to toggle with fade effect in jQuery?

Sometimes you need to toggle with fade in and fade out effects in jQuery. Toggle allows you to perform click and revert that click, or you can assign different functions to every click like this:

$('p').toggle(function(){
        alert("First click");
},function(){
       alert("Second Click");
},function(){
        alert("Third click");
});

In the above code we are using <p> tag as selector and if we click for the first time, it'll alert "First click" and if we click it for the second click, it'll alert "Second click" and so on.

fadeOut() will hide the content by fading it out and fadeIn() will show the hidden content. We are gonna use these effects to toggle content with fade effect.

$(':button').toggle(function(){
        $('img').fadeOut("slow");
},function(){
        $('img').fadeIn("slow");
});

The above code will hide and show images in your page when you clicked that button($(':button') ), with fade effect. Thats It!