In this tutorial we will try to make the hover effect for the image that we used as link with jQuery. If we move our mouse pointer to the image, then the image will become transparent. And, if we move our mouse pointer out of the image, the transparent effect will be removed so the image will go back to its previous state.

The animate() Function

The function that we will use here is animate(). The animate() function itself has some paremeters such as:

.animate( properties, options )

properties : the CSS properties which will be the final state for the animation.
options : additional options such as:

• duration
• easing
• complete
• step
• queue
• specialEasing

In this example, we will use the duration option only. The duration option itself is used to define how long the time (in milliseconds) needed by the object to complete the transition from its initial state to its final state that defined by the properties parameter.

The complete reference about the animate() function can be read from http://api.jquery.com/animate/.

Example

This is the simple animation effect that we will try to create.

   

Coding

This is the code.