Question

我有一小段代码，当点击.nav-trigger时，.home-page将动画显示在左侧，再次点击.nav-trigger时，.home-page将返回0

问题是，当我点击.nav-trigger时，它会立即运行click 2，这不是我想要的。

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

我已尝试从click(function()更改为hover(function()而hover仍有效，但我需要click才能工作

Answer 1

你必须创建自己的切换功能，你可以使用flag和data（）方法来做到这一点，如下所示：

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

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

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

FIDDLE

Answer 2

请参阅我在您的问题中的评论，试试这个：

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

Answer 3

演示：http://jsfiddle.net/souviiik/QYV6b/

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

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

3 个答案: