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 75×75 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>