15

I know how to move up and down an element in jQuery.

$("#div").animate({"left": "+=100"}, 1000); //move 100px to the right

But I have no idea to move in diagonal movement. I'm doing chess board and I don't know how to move Bishop with effect. Please have a look at following URL http://chess.diem-project.org/

I did like this... but it's not a proper way.

for(var i = 0;i<50;i++){ // move down and move right 1 pixel at a time to get effect
 $("#div").animate({"left": "+="+x}, 1); 
 $("#div").animate({"top": "+="+x}, 1); 
}

Any idea? Really appreciate your helps!

Devyn
  • 2,235
  • 7
  • 32
  • 40

1 Answers1

28

Do it like this:

 $("#div").animate({left: '+=50', top: '+=50'}, 1000);

You want one animation to get you there...a for loop queues 100 animations in your case, you just need the one :) See a demo here

Erenor Paz
  • 2,831
  • 3
  • 37
  • 42
Nick Craver
  • 610,884
  • 134
  • 1,288
  • 1,151