如何解决不稳定的动画jQuery的

http://vanquish.websitewelcome.com/~toberua/

这是菜单的样本

<ul> 
    <li id="your-residences"> 
    <strong>Your Residences</strong> 

    <ul> 
     <li class="menu-1"><a href= 
     "/~toberua/your-residences/deluxe-ocean-front-bure/">Deluxe 
     Ocean Front Bure</a></li> 

     <li class="menu-2"><a href= 
     "/~toberua/your-residences/premium-ocean-front-bure/">Premium 
     Ocean Front Bure</a></li> 
    </ul> 
    </li> 

    <li id="your-island"> 
    <strong>Your Island</strong> 

    <ul> 
     <li class="menu-1"><a href= 
     "/~toberua/your-island/where-is-toberua/">Where is 
     Toberua?</a></li> 

     <li class="menu-2"><a href= 
     "/~toberua/your-island/island-facilities/">Island 
     Facilities</a></li> 

     <li class="menu-3"><a href= 
     "/~toberua/your-island/massage-and-spa/">Massage &amp; 
     Spa</a></li> 
    </ul> 
    </li> 
</ul>

这里是我的jQuery：

var menu = { 

    init: function() { 

    $('#header > ul > li').hoverIntent(function() { 
     $(this).find('ul').show().css({opacity: '0.3'}).height(0).animate({height: '88px', opacity: '1.0'}, 800); 

    }, function() { 

     $(this).find('ul').animate({height: '0', opacity: '0.3'}, 400, function() { $(this).hide(); }); 

    }); 

    } 

}

这产生了一些古怪的行为。例如，有时菜单会滑落，然后继续向上和向下滑动。其他令人讨厌的是菜单完美地滑落，然后在它再次回来之前闪烁到空白背景。

有没有人有任何指针，我可能做错了什么？

谢谢

来源

2009-05-06 alex

需要更多的代码，什么是hoverIntent在做什么？ – 2009-05-06 05:33:11

hoverIntent是一个插件，旨在使悬停工作更好..没有排队的事件，这导致他们一个接一个地被解雇。我也提供了一个链接。 – alex 2009-05-06 05:34:34

我注意到了蝙蝠的权利，唯一的问题是，你的代码将快乐地排队另一个动画而不清除已经运行的动画的队列 - 所以如果你将鼠标拖拽一下，你就会重复地打开和关闭菜单，这种风格很怪异！

幸运的是，这是一个简单的办法：只在呼叫扔之前，每个animate()通话stop() ......

来源

2009-05-06 05:39:07 Shog9

有一个jQuery插件，你可能想看看这确实接近你想什么：here：

来源

2009-05-06 05:38:19

如何解决不稳定的动画jQuery的

回答

相关问题