如何在使用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>