How do I animate css properties before and after user events using jQuery?
<p>I am trying to get a simple effect working in jQuery, and only have a few hours of experience with it, so have a lot to learn.</p>

<p>I managed to get this code working:</p>

<pre><code>    &lt;script type="text/javascript" &gt;
    $(document).ready(function() {
        lastBlock = $("#a1");
        maxWidth = 415;
        minWidth = 75;

        $("ul li a").hover(function() {
          $(lastBlock).animate({ width: minWidth + "px" }, { 
            queue: false, 
            duration: 600 
          });
          $(this).animate({ width: maxWidth + "px" }, { 
            queue: false, 
            duration: 600 
          });
          lastBlock = this;
      });

    });
&lt;/script&gt;
</code></pre>

<p>Which gives me exactly what I want, a 6 pane horizontal accordion effect. Each pane however has a 75x75 image on the upper left, which is always visible no matter which pane is active (and it is this image that when hovered over caused the pane to open).</p>

<p>What I want to do is for the image on the selected 'pane' to drop the top margin down to 10px, and then put it back to 0px when a new one is selected, i.e. so the selected panes image is always 10px lower than the other 5 images.</p>

<p>I suspect this should be easy, but not quite grasping the syntax yet.</p>

<p>Thanks.</p>
