单击暂停菜单动画，下次单击继续(Pause menu animation on click, resume on next click)

单击暂停菜单动画，下次单击继续(Pause menu animation on click, resume on next click)

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

小提琴在这里： 小提琴

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

I have a menu animation that I'm using on mouseovers that is working great, but I'm not quite sure how to proceed. When the link is hovered over, the width of a div is animated, simulating an animated underline. I'd like for the animation to stop if that menu item is clicked, essentially keeping that item underlined, but then resume if any of the other menu items are clicked. This is for use in a single page website where I basically want to indicate which section of the website a user is on.

Basic code:

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 is here: fiddle

I've tried an unbind function to get it stopped, which worked, but then have no clue how to get it started again. Any help would be much appreciated!

最满意答案

首先，您可以将所有单独的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的动画，然后将active类添加到单击的锚点，以便在悬停时不会发生动画。

这是一个小提琴

First off, you can condense all of your individual hover handlers in to a single one. Also, if you add a class to the clicked anchor, you can check for its existence, and only animate when it's not 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 }); } });

Then, just attach a click handler to trigger the mousenter / mouseleave events:

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

So, remove the active class from all anchors (apart from the one clicked), and trigger mouseleave to perform the animation of the width to 0, then add the active class to the clicked anchor so that the animation doesn't occur when hovering.

Here's a fiddle