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

Question

我之前回答了一个问题，在单击链接时运行 jQuery 动画。然后发帖人问了一个相当有道理的问题，这让我很难过。

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

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

clicked = true;

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

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

    }
});

平心而论，它只在第一次点击时运行动画。但是，如果我单击该菜单项并单击“Meals”，然后返回单击“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

Answer 2

使用类的另一种方式http://jsfiddle.net/gMha8/17/

$('.tabs_bar').on('click', '#hotel:not(.now)', function () {
    $(this).addClass('now');
    $('#Meal').removeClass('now');
    $('#Hotelbody').animate({
        width: 'toggle'
    }, 1000);
    $('#Hotelbody').fadeIn();
    $('#Mealsbody').hide();

});

$('.tabs_bar').on('click', '#Meal:not(.now)', function () {
    $(this).addClass('now');
    $('#hotel').removeClass('now');
    $('#Mealsbody').animate({
        width: 'toggle'
    }, 1000);
    $('#Mealsbody').fadeIn();
    $('#Hotelbody').hide();
});

---

这是一种愚蠢的做法http://jsfiddle.net/gMha8/14/

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

    $('#hotel').off().on('click', hotel);
    $('#Meal').off('click', meal);
}

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

    $('#Meal').off().on('click', meal);
    $('#hotel').off('click', hotel);
}

$('#hotel').off().on('click', hotel);

$('#Meal').off().on('click', meal);

Answer 3

试试这个：

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;
});

http://jsfiddle.net/gMha8/22/

Answer 4

试试这个

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

Demo