如何使用jquery对连续点击进行动画处理

Question

基本上我希望能够点击一个div，让它向左移动50px，再次点击它，让它向下移动50px，再次点击它并向右移动50px，然后再次点击它并让它移动回到它的原始位置，这样如果我第五次点击它，循环就会重新开始。我已经阅读了整本关于 jQuery 的书，但对此我还是很陌生。我尝试使用 if 语句，它会检查 div 的 css，如果它是这样的，它会将它动画到正确的位置，但问题是，用 jquery 动画对象不会改变它的 css，所以我会'下次无法检查它的 css 以将其动画到下一个位置。现在，我可能完全错误地使用 if 语句。我不需要有人为我编写代码，只需寻找正确的 IDEA。有我应该注意的处理程序吗？我需要捕捉的事件？ jQuery 通常如何处理这类事情？

总结一下：如何让对象在连续点击 jquery 时以循环方式（超过两个动画）进行动画处理？

Answer 1

这是你的做法：

var n = 0;
$('#target').on('click', function () {
    n++;
    if (n == 5) {
        n = 1;
    }
    if (n == 1) {
        $(this).animate({
            'top': '-=50'
        });
    }
    if (n == 2) {
        $(this).animate({
            'left': '+=50'
        });
    }
    if (n == 3) {
        $(this).animate({
            'top': '+=50'
        });
    }
    if (n == 4) {
        $(this).animate({
            'left': '-=50'
        });
    }
});

现场演示：http://jsfiddle.net/tkirda/Yt6kJ/