jQuery fadeToggle() Effect

The jQuery fadeToggle() effect toggles between the fadeIn() and fadeOut() methods of the selected element. If the elements are faded out, the fadeToggle() will fade them in and if the elements are faded in, the fadeToggle() will fade them out.

Syntax of fadeToggle() effect

$(selector).fadeToggle(speed, callback) 

The selector is the element on which fadeToggle effect occurs. The speed parameter specifies the duration of the effect either in milliseconds or a few predefined strings, slow and fast. The optional callback parameter is the name of a function to be executed after the fading completes.

Example

<style>
.demobox { 
width: 200px; 
height: 150px; 
background-color: #CCFFFF;
border: 4px solid black;
display: none;
padding: 20px;
}
</style>

<div id="demo" class="demobox"> Hello World!</div>
<button id="btn">Start Fading Toggle</button>

<script>
(function( $ ) {
$("button#btn").click(function() {
$("div#demo").fadeToggle();
});
})(jQuery);
</script>

Output of the above code

Hello World!


In the above example, when the user click on the 'Start Fading' button, the div box of 'demo' id first gets faded in and on second click it faded out and continuously on click it toggles between fadeIn and fadeOut.



Read more articles


General Knowledge



Learn Popular Language