Learning jQuery

I had already posted about Zoom an image using jQuery but that is on click event of the button. One of my reader asked me how to zoom an image with out a click, simply when mouse is on image. This is not a tough task to do. jQuery provides 2 events mouseover() and mouseout() and as name suggest, these events are executed on mouse moves. To achieve the zoom in effect on mouse over, one need to animate the image using these 2 events. See below code.

$('#imgSmile').width(200);
$('#imgSmile').mouseover(function()
{
   $(this).css("cursor","pointer");
   $(this).animate({width: "500px"}, 'slow');
});

In above code, when mouse is over the image, then the width of image is set to 500 pixels where originally it is 200px.
And on mouse out, just set the width back to 200px. Simple..

$('#imgSmile').mouseout(function()
{
   $(this).animate({width: "200px"}, 'slow');
});

Feel free to contact me for any help related to jQuery, I will gladly help you.

Don't forget to read: