Image Zoom in and out with jquery

Image zoom in  and out with jquery

<h1>Image Zoom In and Zoom Out</h1>
<img alt="image zoom in and out" id="image1" src="http://1.bp.blogspot.com/-XSHj67HnEzU/TviX8Jqe-hI/AAAAAAAABRQ/Io5Ob6bYWq0/s1600/ShadowEffect.jpg" title="image zoom with jquery" />

$(document).ready(function(){
       $('#image1').width(200);
       $('#image1').mouseover(function()
       {
          $(this).css("cursor","pointer");
          $(this).animate({width: "300px"}, 'slow');
       });
    
    $('#image1').mouseout(function() {   
          $(this).animate({width: "200px"}, 'slow');
    });
});

Demo/Download