how to animate on successive clicks using jquery -

basically want able click div, have move 50px left, click again, have move 50px down, click again , move 50px right, , click again , have move it's original position if click 5th time cycle starts on again. i've read entire book on jquery still new this. tried using if statement check css of div , if such , such animate correct position problem is, animating object jquery doesn't change it's css, wouldn't able check it's css next time animate next position. now, may on totally wrong track if statement. don't need write code me, looking correct idea. there handler should aware of? event need catch? how type of thing taken care of jquery?

to sum up: how make object animate in cyclical manner (more 2 animations) upon successive clicks jquery?

here how it:

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'         });     } }); 

live demo: http://jsfiddle.net/tkirda/yt6kj/