Question

我有一个菜单动画，我正在使用的鼠标移动工作正常，但我不太清楚如何继续。当链接悬停在上面时，div的宽度会被动画化，模拟动画下划线。如果单击该菜单项，我希望动画停止，基本上保持该项加下划线，但如果单击任何其他菜单项则恢复。这适用于单页网站，我基本上想要指出用户所在网站的哪个部分。

基本代码：

HTML

 <ul>             
        <li id="contactmenu">
            <a href="#contactpage">contact
                <div class="underlinecontact">               
                </div>
            </a>
        </li>
</ul>

CSS

.underlinecontact
{
    border-bottom: solid 3px maroon;
    width: 0%;
    margin-top: 8px;
}

的jQuery

$(document).ready(function(){
  $("#contactmenu").hover(function(){
      $(".underlinecontact").stop().animate({width: "100%"});
    },function(){
      $(".underlinecontact").stop().animate({width: "0%"});
  });
});

小提琴在这里：fiddle

我尝试了一个unbind函数来让它停止，这有效，但后来却不知道如何重新启动它。任何帮助将非常感激！

Answer 1

首先，您可以将所有单个hover处理程序压缩为一个处理程序。此外，如果您向点击的锚点添加class，则可以检查其是否存在，并且仅在不是active的情况下进行动画处理：

$('#Menu a').hover(function() {
    if (!$(this).hasClass('active')) {
        $(this).children('div').stop().animate({ width: '100%' });
    }
}, function() {
    if (!$(this).hasClass('active')) {
        $(this).children('div').stop().animate({ width: 0 });  
    }
});

然后，只需附加点击处理程序即可触发mousenter / mouseleave个事件：

$('#Menu a').click(function() {
   $('#Menu a[href*="page"]').not(this).removeClass('active').trigger('mouseleave');
    $(this).addClass('active');
});

因此，从所有锚中移除active类（除了单击的一个），然后触发mouseleave以执行宽度为0的动画，然后添加{{ 1}}对所单击的锚类，以便在悬停时不会发生动画。

单击暂停菜单动画，下次单击继续

1 个答案:

Here's a fiddle