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/

如何使用jquery为连续点击设置动画

1 个答案: