Great work! With fade, our website is starting to look dynamic. .fadeToggle()
is the third and final method in this trio of fade methods. This method is similar to .toggle()
. If you call .fadeToggle()
on an element that is invisible, it will fade in. And if the element is already visible, then .fadeToggle()
will make it fade out.
Like the other fade methods, .fadeToggle()
can take an argument that sets the duration of the effect.
$('div').fadeToggle(1000);
In the example above, all div
elements will fade in or out over a period of 1000 milliseconds. Hidden div
elements will fade in, and visible div
elements will fade out.
Instructions
Inside the event handler connected to the button of class fade-toggle-button
, target the image of class fade-image
and call .fadeToggle()
on it. Take a look at the jQuery documentation to see how to use a string as an argument. Make the image fade fast. Try all three of your fade buttons!
Notice that the fade toggle button always produces an effect regardless of the current state of the element.