jQuery 使动画仅在单击时发生一次

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

使用one()对于任何只需要处理一次的事件。

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

如果问题要求单击按钮后动画返回，那么您需要重置 left 属性，而不是尝试递增/递减它。

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