jQuery make animation происходит только один раз при нажатии

Question

У меня есть простой код анимации jQuery, который я использую для перемещения div слева направо, когда пользователь нажимает на ссылку, а затем справа налево, когда пользователь нажимает на другую ссылку ,

Моя проблема заключается в том, что если пользователь продолжает щелкать по той же ссылке, div продолжает двигаться влево. Я хочу, чтобы они только могли щелкнуть его один раз, и если они снова нажмут на него, ссылка ничего не сделает.

Вот мой код:

$(document).ready(function(){ 
$('a.facebook').click(function() { 
    $('#social_holder').animate({'left' : '-=420px'}); 
}); 
$('a.twitter').click(function() { 
    $('#social_holder').stop().animate({'left' : '+=420px'}); 
}); 
}); 

пример того, что я работаю, можно найти здесь: http://www.samskirrow.com/client-bionic

Благодаря

Answer 1

Скорее всего, используя «+ = 420» и «- = 420», используйте абсолютные позиции.

$(document).ready(function(){ 
$('a.facebook').click(function() { 
    $('#social_holder').animate({'left' : '0'}); 
}); 
$('a.twitter').click(function() { 
    $('#social_holder').stop().animate({'left' : '420px'}); 
}); 
}); 

Это также предотвращает позиционирование div на полпути.

Answer 2

Использование one() для любого события, которое должно быть обработано только один раз.

$('a.facebook').one('click', function() { 
    $('#social_holder').animate({'left' : '420px'}); 
}); 

Если вопрос с просьбой оживить назад после того, как кнопка была нажата, то вам нужно сбросить левое свойство вместо того, чтобы увеличить/уменьшить его.

$(document).ready(function(){ 
    $('a.facebook').click(function() { 
     $('#social_holder').animate({'left' : '0'}); 
    }); 
    $('a.twitter').click(function() { 
     $('#social_holder').animate({'left' : '420px'}); 
    }); 
});