fadeToggle method in jQuery
The method fadeToggle works similarly to the method slideToggle, it also implements alternating effects: sometimes it shows the element, sometimes it hides it.
For example, we can show and hide an element by clicking on the same button. Let's implement this method using the following HTML code:
<button id="toggle">click me</button>
<div id="elem">text...</div>
Let the CSS look like this:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
We write the following Javascript code:
$('#toggle').click(function() {
$('#elem').fadeToggle(1000);
});
