How do I animate css properties before and after user events using jQuery?

Question

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.

I managed to get this code working:

    <script type="text/javascript" >
    $(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;
      });

    });
</script>

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).

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.

I suspect this should be easy, but not quite grasping the syntax yet.

Thanks.

Answer 1

If I'm understanding you, it should be a simple matter of chaining with the callback on the animate method.

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

        $("ul li a").hover(function() { 
          $(lastBlock).animate({ width: minWidth + "px" }, {  
            queue: false,  
            duration: 600  
          }, function() {
               $(this).find('img').animate({ topMargin: "-=10" }); // remove 10px
          }); 
          $(this).animate({ width: maxWidth + "px" }, {  
            queue: false,  
            duration: 600  
          }, function() {
               $(this).find('img').animate({ topMargin: '+=10' }); // add 10px
          }); 
          lastBlock = this; 
      }); 

    });
</script>