Javascript 链接单击计数以运行一次动画

我在前面回答了一个问题，在单击链接时运行jQuery动画。然后海报问了一个很有道理的问题，把我难住了

“如何仅在第一次单击时运行动画”

我认为这会很简单，所以我尝试了这样的方法：

clicked = true;

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

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

    }
});

公平地说，它只在第一次单击时运行动画。但是，如果我关掉菜单项，点击“吃饭”按钮，然后返回点击“酒店”按钮，动画就不会运行了。我花了一上午的时间试图弄明白这一点，现在我感到很沮丧-哈哈

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

请看一个例子

应采取的步骤：

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类：从中激活并设置动画？

试试这个

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

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

});

$('#Meal').click(function(){
$('#Mealsbody').animate({width:'toggle'},1000);
$('#Hotelbody').animate({width:'toggle'},1000);
$('#Mealsbody').fadeIn();
$('#Hotelbody').hide();
});

试试这个

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

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

});

$('#Meal').click(function(){
$('#Mealsbody').animate({width:'toggle'},1000);
$('#Hotelbody').animate({width:'toggle'},1000);
$('#Mealsbody').fadeIn();
$('#Hotelbody').hide();
});

试试这个：

var lastClicked = null;

$('#hotel').click(function(e){
    if (lastClicked != e.target){
    $('#Hotelbody').animate({width:'toggle'},1000);
    $('#Hotelbody').fadeIn();
    $('#Mealsbody').hide();

    }
    lastClicked = e.target;
});

$('#Meal').click(function(e){

    if (lastClicked != e.target){$('#Mealsbody').animate({width:'toggle'},1000);
    $('#Mealsbody').fadeIn();
    $('#Hotelbody').hide();
                    }
     lastClicked = e.target;
});

试试这个：

var lastClicked = null;

$('#hotel').click(function(e){
    if (lastClicked != e.target){
    $('#Hotelbody').animate({width:'toggle'},1000);
    $('#Hotelbody').fadeIn();
    $('#Mealsbody').hide();

    }
    lastClicked = e.target;
});

$('#Meal').click(function(e){

    if (lastClicked != e.target){$('#Mealsbody').animate({width:'toggle'},1000);
    $('#Mealsbody').fadeIn();
    $('#Hotelbody').hide();
                    }
     lastClicked = e.target;
});

---

使用类的另一种方法

---

这是一个愚蠢的方法

---

使用类的另一种方法

---

这是一个愚蠢的方法

---

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

$('#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();
});

---

不会那么难，只要检查一下被点击的那一个当前是否可见即可

$('#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();
});

---

---

使用方法而不是单击。如果我错了，请纠正我，但one（）将做完全相同的事情。。。它将运行动画一次，然后当您在用餐菜单项后返回时，它将什么也不做？看这把小提琴：不清楚你想说什么！演示：您最好首先正确处理这个

活动的
类，然后逻辑很容易获得，如果元素已经活动，请签入click处理程序，或者不使用方法而不是click。如果我错了，请纠正我，但one（）将做完全相同的事情。。。它将运行动画一次，然后当您在用餐菜单项后返回时，它将什么也不做？看这把小提琴：不清楚你想说什么！演示：您最好首先正确处理这个
活动的
类，然后很容易获得逻辑，如果元素已经活动，请检查并单击处理程序，或者猜测这是我们实现它的唯一方法。我想的是完全相同的路线，但也认为每次都要重置标志是愚蠢的（谢谢你。@Mike我改进了我的答案。哇-我其实更喜欢你的方法，因为我真的理解它！！hahaslaps head我没有注意到两个点击处理程序是相同的。如果你使用这个，请确保你像Adeneo那样将两个选择器合并到他出色的答案中。我想这是我们实现它的唯一方法。我是为完全相同的路线添加墨水，但也认为每次都必须重置标志是愚蠢的（谢谢你。@Mike我改进了我的答案。哇-我其实更喜欢你的方法，因为我真的理解它！！hahaslaps head我没有注意到两个点击处理程序是相同的。如果你使用这个，请确保你像Adeneo那样将两个选择器合并到他出色的答案中。我认为这并不愚蠢，因为这是我唯一的思考方式它几乎和克里斯·哈代的例子完全一样，只是稍微优雅一点。haha@Mike是的，现在又有一个在用classes@Mike你可能还想在动画中添加
.stop（）
，看看adeneo的答案……我很喜欢这个：）非常感谢你的帮助。在我看来，这并不愚蠢，因为这也是我实现这一目标的唯一途径。这与克里斯·哈代的例子几乎完全相同，只是稍微优雅一点。haha@Mike是的，现在又有一个在用classes@Mike您还可能需要添加
.stop（）
看一看阿迪内奥的答案……我很喜欢这个：）非常感谢你的帮助。展示-99.7k先生只是让我大吃一惊！：）这太棒了。谢谢你，先生。比我当时的方向聪明多了。@Mike-没问题，我们在这里做的就是让人兴奋！SHEW-99.7k先生刚刚踏进了a，这让我大吃一惊！：）这太棒了。谢谢你，先生。比我当时的方向聪明多了。@Mike-没问题，我们在这里做的就是让人兴奋！