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

Question

У меня есть элемент в моем теле, что я анимировать ти этой функции:

$(function(){ 
    $("#telefonofisso").click(function(){ 
     if ($("#telefonofisso").hasClass('negative')) { 
      $(this).delay(400).animate({right:'10px'},1000).addClass('positive').removeClass('negative') 
     } 
    }); 
}) 

Но я не могу заставить его вернуться в исходное положение right:-210px если нажать на нее еще раз. Я попытался с помощью следующей функции:

$(function(){ 
    $("#telefonofisso").click(function(){ 
    if ($("#telefonofisso").hasClass('positive')) { 
     (this).delay(400).animate({right:'-210px'},1000).addClass('negative').removeClass('positive') 
    } 
    }); 
}) 

Но эта функция активируется, прежде чем я нажимаю во второй раз, так что мой элемент, если я нажимаю на него, начинается с right:-210px, идет к right:10px, чем возвращается к right:-210px только с одним нажмите кнопку.

Как я могу это исправить, и почему он действует так? Я не понимаю, почему он это делает. Потому что теоретически триггер - это щелчок, а вторая функция должна действовать только тогда, когда я нажимаю второй раз, верно?

Answer 1

Попробуйте это:

$(function(){ 
    $("#telefonofisso").click(function(){ 
    if ($("#telefonofisso").hasClass('positive')) { 
     $(this).delay(400).animate({right:'-210px'},1000) 
       .addClass('negative').removeClass('positive'); 
    } else { 
     $(this).delay(400).animate({right:'10px'},1000) 
       .addClass('positive').removeClass('negative');  
    } 
    }); 
}); 

Это позволит решить вашу проблему.

И вы забыли $ sign во втором звонке.

Answer 2

Попробуйте рабочую демо-версию, согласно вашему требованию

$(function(){ 
     $("#telefonofisso").click(function(){ 
      var modified = $('.slider').css('left') === '250px' ? '0px' : '250px';    
      $('.slider').animate({    
       left : modified 
      }, 300) 
     }); 
    }) 

http://jsfiddle.net/stanze/02e11v2p/1/