0

Basically I want to be able to click a div, have it move 50px to the left, click it again, have it move 50px down, click it again and move 50px to the right, and click it again and have it move back to it's original position so that if I click it a 5th time the cycle starts over again. I've read an entire book on jQuery but I am still very new to this. I tried using an if statement where it would check the css of the div and if it was such and such it would animate it to the correct position but the problem is, animating an object with jquery doesn't change it's css, so I wouldn't be able to check it's css the next time to animate it to the next position. Now, I may be on the totally wrong track with the if statement. I don't need someone to write my code for me, just looking for the correct IDEA. Is there a handler I should be aware of? An event I need to catch? How is this type of thing usually taken care of with jQuery?

To sum it up: how do you make an object animate in a cyclical manner (more than two animations) upon successive clicks with jquery?

4

1 回答 1

0

这是您的操作方法：

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/

于 2013-05-06T05:16:35.720 回答