Let us try to elaborate on these methods.
If the function show produces a change in element style, then setInterval(show, t) method can be used for producing gradual changes in the style of an element after every time interval. When the time interval is small, then the animation looks continuous.
This method is easy to set up and hard to cancel. It is optimized to perform smooth animation. The loops in it are needed to be created manually, and also the timing needs to be set up manually. This method is not made to be used at specific intervals.
This method is designed to loop at 60fps (frames per second) to perform smooth animation. It won't run in the background, and it is also energy efficient.
Let's understand the simple animation by using the following example.
ExampleTest it Now
Image Rollover with a mouse event
Let's understand another example of animation in which there is an image rollover by a mouse event. When the mouse moves over the image, the HTTP image will change to the second one from the first image. But when the mouse gets moved away from the image, then the original image will be displayed.
The onMouseOver event handler triggers when the user will move the mouse onto the link, and the onMouseOut event handler gets trigger when the user will move the mouse away from the link.Test it Now
Next TopicES5 vs ES6