Great work! In this exercise, you will learn about two new methods that are similar to .hide() and .show(). Take a look at the gif below:
In this gif, the .fadeIn() method is called on
an HTML element. Instead of instantly showing the element, .fadeIn() and .fadeOut() make the element appear or disappear over a given period of time. You can think of this as an animation. The transition between being visible and invisible happens over a duration of time.
Both .fadeIn() and .fadeOut() take an optional parameter that specifies how long the animation will take. For example, in the code below, all <div> elements will fade out over a period of 1000 milliseconds (or one second).
In the example above, the 1000 argument is optional; you don’t need to put a number between the parentheses. This number represents the number of milliseconds it takes for the animation to complete. If no argument is given, the default animation duration is 400 milliseconds.
Instructions
We’ve added two new buttons and a new image to our table. We’ve also given you the event handlers for these new buttons. In the first new event handler’s callback function, select the image of class fade-image and call .fadeOut() on it.
Give .fadeOut() an argument to make the animation take 500 milliseconds.
Test the Fade Out button!
In the second event handler’s callback function, select the same image and call .fadeIn() on it. Let’s make the image appear slower than it disappears. Give .fadeIn() a parameter of 4000.
Try out the Fade In button. You should notice that the image fades in much slower!