Question

我有一个简单的jQuery动画代码，用于在用户点击链接时从左向右移动div，然后在用户单击另一个链接时从右向左移动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'});
});

如果问题是在单击按钮后要求设置动画，则需要重置左侧属性，而不是尝试增加/减少它。

$(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被定位在中途。

jQuery使动画只在点击时发生一次

2 个答案: