Question

嘿，我在jquery中有一个函数来向右移动一个div元素然后单击鼠标左键。但是在seocnd点击它应该再次执行相同的操作。它只是执行最后一行功能。我的代码是

$(document).ready(function(){
    $('#circle').click(function() {
        $('#rocky').animate({right:"+=75%"},500);
        $('#rocky').animate({left:"+=75%"},500);
    });
});

在第一次单击时该功能运行良好，但在第二次单击时，它只是执行最后一个动画左边的动画，我的div向左移动。这是我不想要的。我只想在每次点击时都要像第一次点击那样执行

Answer 1

jQuery的animate()方法是非阻塞的，这意味着一旦它开始运行，它后面的代码也将开始运行，而不必等待动画完成。出于您的目的，您将需要使用回调函数，该函数仅在初始动画完成后才会运行。

$(document).ready(function(){
    $('#circle').click(function() {
        $('#rocky').animate({right:"+=75%"},500, function () {
            $('#rocky').animate({left:"+=75%"},500);
        });
    });
});

虽然你的CSS可能也需要一些工作。我建议只使用“左”或“右”而不是两者，根据需要添加或减去。

$(document).ready(function(){
    $('#circle').click(function() {
        $('#rocky').animate({left:"+=75%"},500, function () {
            $('#rocky').animate({left:"-=75%"},500);
        });
    });
});

jQuery animate()文档供参考：http://api.jquery.com/animate/

Answer 2

由于您要向右边添加75%，要将其移至原始位置，从正确的值中减去75%

$('#circle').click(function() {
    $('#rocky').animate({right:"+=75%"}, 500);
    $('#rocky').animate({right:"-=75%"}, 500);
});

演示：Fiddle

jquery函数的行为不正常

2 个答案: