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

Answer 2

而不是使用“+=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 被定位到中途。