Jquery 悬停切换

Posted 2023-05-08

【中文标题】Jquery 悬停切换

【英文标题】：Jquery hover toggle

【发布时间】：2011-06-06 19:21:03

【问题描述】：

嗨，我所做的是在 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.
              );

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

谢谢

【问题讨论】：

动画高度也可以通过“切换”来完成。 A 会完全不可见吗？

【参考方案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() );

【讨论】：

没问题，很高兴能为您提供帮助。

【参考方案2】：

如果我没看错，您正在寻找.hover() 函数，不是吗？