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); 
    } 
);