jquery函数的行为不正常

嘿，我在jquery中有一个函数，可以在单击时左右移动div元素。但在seocnd时单击，因为它应该再次执行相同的操作。它只是执行函数的最后一行。我的代码是

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

在第一次单击时，该函数运行良好，但在第二次单击时，它只是执行最后一个lne，即“动画左移”和“我的div左移”。这是我不想要的。我只想在每次单击时都像第一次单击一样执行jQuery的

animate（）

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

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

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

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

jQuery的

animate（）

文档供参考：

jQuery的

animate（）

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

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

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

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

jQuery的

animate（）

文档供参考：

jQuery的

animate（）

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

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

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

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

jQuery的

animate（）

文档供参考：

jQuery的

animate（）

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

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

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

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

---

jQuery

animate（）

文档供参考：

由于您要将

75%

添加到右侧，要将其移动到原始位置，请从右侧值中减去

75%

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

---

演示：

由于要将

75%

添加到右侧，要将其移动到原始位置，请从右侧值中减去

75%

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

---

演示：

由于要将

75%

添加到右侧，要将其移动到原始位置，请从右侧值中减去

75%

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

---

演示：

由于要将

75%

添加到右侧，要将其移动到原始位置，请从右侧值中减去

75%

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

---

演示：

这是一把入门小提琴，你能调整它以显示当前发生的事情吗？你能做一把小提琴吗？这是一把起始小提琴，你能调整它来显示你现在正在做什么吗？你能做一把小提琴吗？这是一把起始小提琴，你能调整它来显示你现在正在做什么吗？你能做一把小提琴吗？这是一把起始小提琴，你能调整它来显示你现在正在做什么吗？你会拉小提琴吗？“动画”功能使用队列。。。所以如果你有两个动画调用，它们会一个接一个地执行。。。它们不会同时执行动画功能使用队列。。。所以如果你有两个动画调用，它们会一个接一个地执行。。。它们不会同时执行动画功能使用队列。。。所以如果你有两个动画调用，它们会一个接一个地执行。。。它们不会同时执行动画功能使用队列。。。所以如果你有两个动画调用，它们会一个接一个地执行。。。他们不会同时被处决嘿，这不是问题，兄弟。它在移动，但在第二次点击。就要走了。第三次点击更多的左边。等等嘿，这不是问题，兄弟。它在移动，但在第二次点击。就要走了。第三次点击更多的左边。等等嘿，这不是问题，兄弟。它在移动，但在第二次点击。就要走了。第三次点击更多的左边。等等嘿，这不是问题，兄弟。它在移动，但在第二次点击。就要走了。第三次点击更多的左边。等等