如何使用jQuery在用户事件之前和之后为css属性设置动画？

Question

我正在尝试在jQuery中获得一个简单的效果，并且只有几个小时的使用经验，所以有很多东西需要学习。

我设法让这段代码正常工作：

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

这正是我想要的，一个6格的水平手风琴效果。然而，每个窗格的左上角都有一个75x75的图像，无论哪个窗格处于活动状态，该图像都始终可见(当鼠标悬停在该图像上时，该图像会导致窗格打开)。

我想要做的是让所选“窗格”上的图像将上边距降至10px，然后在选择新图像时将其放回0px，即所选窗格图像始终比其他5个图像低10px。

我怀疑这应该很容易，但还没有完全掌握语法。

谢谢。

Answer 1

如果我理解你的意思，这应该是一个简单的链接到动画方法上的回调。

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