JQuery нажмите запуск анимация нажмите снова

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

Вы должны создать свою собственную функциональность переключателя, вы можете сделать это, используя флаг и данные() метод, что-то вроде этого:

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