Cómo mover un elemento en Movimiento diagonal en jQuery?

Question

Sé cómo mover hacia arriba y hacia abajo un elemento en jQuery.

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

Pero no tengo idea de mover en diagonal. Estoy haciendo un tablero de ajedrez y no sé cómo mover a Bishop con efecto. Por favor, eche un vistazo a la siguiente URL http://chess.diem-project.org/

Me gustó esto ... pero no es una manera adecuada.

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

¿Alguna idea? ¡Realmente aprecio tus ayudas!

Answer 1

hacerlo de esta manera:

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

quieres una animación para llegar allí ... una de las colas de bucle 100 animaciones en su caso, sólo tiene el uno :) See a demo here