Transparent Image On Hover With jQuery

Posted on: 8 January 2011
By: admin

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>jQuery Animation</title>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<!-- DIV containing the image link that will be given the animation effect -->
<div id="animated">
  <a href="javascript:void(0)">
    <img src="images/save.png" alt="save" border="0" />
  </a>
  &nbsp;&nbsp;&nbsp;
  <a href="javascript:void(0)">
    <img src="images/cancel.png" alt="cancel" border="0" />
  </a>
</div>
<script language="javascript">
$(document).ready(function(){
  // Add the hover handler to the link
  $("#animated a").hover(
    function(){ // When mouse pointer is above the link
      // Make the image inside link to be transparent
      $(this).find("img").animate(
        {opacity:"0.5"},
        {duration:300}
      );
    },
    function(){ // When mouse pointer move out of the link
      // Return image to its previous state
      $(this).find("img").animate(
        {opacity:"1"},
        {duration:300}
      );
    }
  );
});
</script>
</body>
</html>