Learn
Learn jQuery: Effects
.fadeToggle()

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

1.

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.

Folder Icon

Sign up to start coding

Already have an account?