javascript - 动画运行一次的链接点击次数

Question

我之前回答了一个问题，在单击链接时运行 jQuery 动画。然后张贴者提出了一个非常有效的问题，这让我很困惑。

“如何只在第一次点击时运行动画”...

我认为这会很简单，所以我尝试了这样的事情:

clicked = true;

$('#hotel').click(function(){

    if (clicked){
    $('#Hotelbody').animate({width:'toggle'},1000);
    $('#Hotelbody').fadeIn();
    $('#Mealsbody').hide();
        clicked = false;

    }
});

平心而论，它仅在第一次点击时运行动画。但是，如果我单击该菜单项并单击“Meals”，然后返回单击“Hotels”，则动画根本不会运行。我花了整个上午试图解决这个问题，现在我很沮丧 - 哈哈

本质上，需要做的是，当用户在“Hotels”菜单项上时，如果他/她单击“Hotels”菜单项，则不要再次运行动画。但如果用户冒险进入另一个菜单项并返回旅馆，则运行动画。

请参阅FIDDLE举个例子。

要遵循的步骤:

1. Click Hotel --> (Animation runs)
2. Click Hotel again --> (Animation doesn't run)[so far, so good] 
3. Click Meals --> Then Click Hotels again --> (Animation will not run again) 

如果我需要进一步解释，请告诉我？

想法: - 让 jQuery 查看 css 类:active 和动画吗？

Answer 1

没那么难，只要检查被点击的那个当前是否可见

$('#Hotel, #Meals').on('click', function(){
    var el = $('#'+this.id+'body');
    if ( el.is(':visible') ) return false;
    el.animate({width:'toggle'},1000)
    $('#Mealsbody, #Hotelbody').not(el).hide();
});

FIDDLE