Jquery悬停切换

Question

嗨,我所做的是在document.load我已经减少了导航li的高度,并动画了导航下方的div.我想要做的是在导航中的每个li的悬停是反向下面的动画jquery代码:

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

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

我将如何使用悬停触发器来反转此代码？

谢谢

Answer 1

像下面这样的东西？

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

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

}, function(){
  $(this).animate({marginTop: '147'}, 1000, function(){
   //animation complete
  });

});

请注意,此外还有这样的动画,请记住在继续播放元素上的另一个动画之前停止动画.

例:

$(this).stop().animate({height:300}), 1000, function(){ });