0

我有一个菜单动画，我在鼠标悬停时使用效果很好，但我不太确定如何继续。当链接悬停在上面时，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%"});
  });
});

小提琴在这里：小提琴

我尝试了一个取消绑定功能来让它停止，这很有效，但是不知道如何让它重新开始。任何帮助将非常感激！

4

1 回答 1

0

首先，您可以将所有单独的hover处理程序压缩为一个。此外，如果您将 a 添加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，然后将active类添加到单击的锚点，以便在悬停时不会出现动画。

这是一个小提琴

于 2013-06-04T15:13:26.237 回答