title: jQuery 'expand' and 'contract' image on hover - 'contract' fails
body: <p>My aim is to animate an image to new dimensions on mouse-over as well as temporarily add a new css class, and to return it to its original dimensions (and remove the added class) on mouse-out.</p>
  
  <p>My code works fine on mouse-over.  On mouse-out the added class is removed, however the image dimensions are not restored to the original width and height.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img src='img.jpg' alt='' class='pulse'&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(function() {
    // set global img width and height
    var width_pulse_img = 0;
    var height_pulse_img = 0;
    $('img.pulse').hover(function () {
      // onMouseOver: read original width and height on FIRST mouseover
      if (!width_pulse_img) width_pulse_img = $(this).css('width');
      if (!height_pulse_img) height_pulse_img = $(this).css('height');
      // set img expansion ratio and compute new dimensions
      var float_exp = 1 + 0.1;
      var ww = (float_exp*parseInt(width_pulse_img, 10)).toString();
      var hh = (float_exp*parseInt(height_pulse_img, 10)).toString();
      // animate to new dimensions
      $(this).addClass('hover').stop().animate({
        width: ww + 'px',
        height: hh + 'px'
      }, 200);
    }, function () {
      // onMouseOut: animate back to original dimensions: 
      $(this).removeClass('hover').stop().animate({
        // THIS IS THE PART THAT DOES NOT WORK
        width: width_pulse_img + 'px',
        height: height_pulse_img + 'px'
      }, 400);
    });
  });
  </code></pre>
  
  <p>I have tested in Firefox 12.0, Chrome and IE 9.0 and the behaviour is the same.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/z6zvg/" rel="nofollow">jsFiddle</a> demonstrating the problem. Any help will be appreciated.</p>