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.
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.
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.