jQuery的動畫問題（進行動畫）

Question

我試圖做一個非常簡單的一套jQuery的動畫用下面的代碼：

的事情之一是它不工作我如何計劃，當你將鼠標懸停在菜單中，下面的div應該向下移動，菜單展開，當你懸停時，反過來應該發生！

該網站是http://www.twostepmedia.co.uk/intasound/services.php挽救把所有的HTML

$('.tabs li a').animate({ 
    height: '40' 
}, 1000, function() { 
    // Animation complete. 
}); 

$('#tabs-wrap').animate({ 
    marginTop: '-=147' 
}, 1000, function() { 
    // Animation complete. 
}); 

$(".tabs").hover(function() { 
    $('#tabs-wrap').animate({ 
     marginTop: '+=147' 
    }, 500, function() { 
     $('.tabs li a').animate({ 
      height: '150' 
     }, 500, function() { 
      // Animation complete. 
     }); 
    }); 
}, function() { 
    $('.tabs li a').animate({ 
     height: '40' 
    }, 500, function() { 
     $('#tabs-wrap').animate({ 
      marginTop: '-=147' 
     }, 500, function() { 
      // Animation complete. 
     }); 
    }); 
}); 

Answer 1

要注意回調每個匹配元素執行一次，沒有一次爲動畫作爲一個整體是很重要的。 （http://api.jquery.com/animate/）

因爲$（ '標籤裏一'）返回4個元素，回調函數將運行4次，如果正確解釋文檔。

也許你可以嘗試這樣的事情？

$('.tabs').hover(
    function(){ 
     $('#tabs-wrap').animate({marginTop: '+=147'}, 500); 
     $('.tabs li a').delay(500).animate({height: '150'}, 500); 
    }, 
    function(){ 
     $('.tabs li a').animate({height: '40'}, 500); 
     $('#tabs-wrap').delay(500).animate({marginTop: '-=147'}, 500); 
    } 
);