On image mouseover zoom

Here is my jQuery code..

 $('img').live('mouseenter',function()
          {  
              $(t开发者_运维百科his).addClass('shown');
              $('.shown').animate({width: '+=50',height: '+=50'})
          });

 $('img').live('mouseleave',function()
          {
              $(this).removeClass('shown');
              $(this).addClass('reset');
               $('.reset').animate({width: '-=50',height: '-=50'})
          });

It is removing the image after some mouse enters.. Please help me..

You are making selection of the image to animate more complicated than it needs to be:

$('img').hover(
    function () { 
        $(this).animate({width: '+=50', height: '+=50'});
    },
    function () {
        $(this).animate({width: '-=50', height: '-=50'});
    });