title: jQuery Zoom-in and Zoom-Out is not working
body: <p>I am attempting to zoom-in and zoom-out out of a photo when a button is pressed, however I am unable to get the code to work properly I believe this is do to the way i have structured the zoom-out part of my code.</p>
  
  <p>jQuery code:</p>
  
  <pre><code>      $(".enlarge-photo").click(function(){
      //photo - zoom-in
          var $img = $(".image");
      $img.stop().animate({ 
      height: "365", 
      width: "269", 
      paddingRight: "12"},"fast");
  
    },function(){
          $img.stop().animate({
          height: "265",
          width: "169",
          paddingRight: "0"},"fast");
    });
  </code></pre>
  
  <p>This is the HTML I am using:</p>
  
  <pre><code>&lt;figure&gt;
              &lt;img class="image" src="img/basketball.jpg" width="169" height="265" border="0" alt="basketball dunk"/&gt;
              &lt;figcaption&gt;Laura Skelding/AMERICAN-STATESMAN&lt;/figcaption&gt;
          &lt;/figure&gt;
  
              &lt;ul id="photo"&gt;
                  &lt;li rel="nofollow"&gt;&lt;a class="enlarge-photo" href="#" title="enlarge-photo"&gt;ENLARGE PHOTO&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>