jQuery单击运行动画，然后再次单击

我有一小段代码，当单击

.nav trigger

时，主页将向左侧显示动画，当再次单击

.nav trigger

时，主页将返回0

问题是，当我单击

.nav触发器时，它会立即运行
单击2
，这不是我想要的

$('.nav-trigger').click(function(){
    $('.home-page').animate({
        left: '-260px'
    });
    console.log('click 1');
}, function() {
    $('.home-page').animate({
        left: '0px'
    });
    console.log('click 2');
});

我尝试过从
单击（function（）
更改为
悬停（function（）
，
悬停
可以工作，但我需要
单击
才能工作
您必须创建自己的切换功能，您可以使用标志和data（）方法来完成，类似这样：

$('.nav-trigger').on('click', function(){
    var flag = $(this).data('flag');

    $('.home-page').animate({left: flag ? -260 : 0});

    $(this).data('flag', !flag);
});

参考我在您的问题中的评论，尝试以下方法：

// track the clicks
var click = 0

$('.nav-trigger').click(function(){
    // increment the counter
    click++;

    // odd clicks go left -260px
    if(click%2==1){
        $('.home-page').stop().animate({
            left: '-260px'
        });
    }
    else{
        // even clicks go back to 0px
        $('.home-page').stop().animate({
            left: '0px'
        });
    }
});

演示：

您需要使用.animate callbackthe
click
处理程序不是这样工作的。之所以使用hover，是因为传入的第一个参数是“mouseover”要执行的代码，第二个参数是“mouseout”，不确定OP是否感兴趣，但输入了
.stop（）
可以从用户体验的角度证明是有用的。如果有人多次点击按钮，停止（真的，真的）

可以避免一些问题，但这取决于操作。@adeneo谢谢！我必须在

$（'.nav trigger'）.data（'flag'，true）；

前面加上（'click，function（））但这段代码很棒！@DonaldSutherland-啊，这意味着顺序错了，你只需交换-260和0数字即可。

$('.nav-trigger').click(function(){
    if($(this).hasClass("clicked")) {
        $('.home-page').animate({
           "margin-left": 0
        });
        $(this).removeClass("clicked");
        console.log('click 1');
    } else {
        $(this).addClass("active");
        $('.home-page').animate({
           "margin-left": '-260px'
        });
        console.log('click 1');
    }
});