Question

我之前回答了一个问题，在点击链接时运行jQuery动画。然后海报问了一个让我难过的有效问题。

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

我认为这很简单，所以我试过这样的事情：

clicked = true;

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

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

    }
});

，公平地说，只在第一次点击时运行动画。但是，如果我点击该菜单项并进入“餐”，然后返回点击“酒店”，则动画根本不会运行。我花了整个上午试图解决这个问题，现在我感到很沮丧 - 哈哈

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

请参阅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类：活动和动画吗？

Answer 1

试试这个：

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 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

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

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

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

4 个答案: