jQueryの問題をアニメーションは

Question

は、私は次のコードでjQueryのアニメーションのかなり簡単なセットを実行しようとしています（アニメーションに運びます）下のdivは下に移動し、メニューが展開され、あなたが外に出るとき、その逆が起こるはずです！

サイトは、すべてのHTMLを入れて保存するhttp://www.twostepmedia.co.uk/intasound/services.phpある

$('.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/）

ので、$（ 'タブのli A'）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); 
    } 
);