Introduction to Effects

Brief introduction

Features such as event handlers, DOM traversal, and DOM manipulation add necessary functionality to a web page. But how can we go the extra mile to make our web page look more attractive and be more interactive?

This is where jQuery effects and animations become important. These effects and animations focus largely on the non-functional aspect of a web page. The goal is to give a web page a more dynamic and visually appealing appearance.

Example

Let’s understand the importance and impact of simple effects and animations using the to-do list project. We have implemented the basic functionality of a to-do list without any effects or animations. Try performing the following operations on the below web page:

1. Add a new task.
2. Move the task from to-do to done.
3. Delete the task.

You will notice operations happen very abruptly without any effects or visual cues.

Now, repeat the same operations on the web page below. Notice how, when you click the button, the task fades out, disappears, and fades into the done list. Similarly, when you click the delete button, the task slowly fades out instead of instantly disappearing.

The use of simple effects make the web page and its different actions more appealing, intuitive, and pleasant to the eye. Therefore, even though effects and animations do not add functionality, they are essential for a well-designed webpage.

Different effects in jQuery

jQuery provides us with a trivial interface and several useful methods for implementing different effects and animations. Different types of effects in jQuery are shown in the illustration below.