¿Necesita animar una imagen para alejarse de la posición del cursor en cada mouseover?

Question

Estoy tratando de animar una imagen de un cuadro cambiando su posición al pasar el mouseover.

Puedo hacer que se mueva una vez, pero tengo que configurarlo para que se mueva cada vez que alguien pase sobre la imagen. Quiero hacer que los usuarios 'persigan' la caja alrededor de la pantalla.

Preferiblemente, la animación se repetirá para que el usuario nunca pueda ver la imagen.

Aquí es an example of what I have so far, y por debajo es mi código jQuery:

$(document).ready(function() { 
    $('#img').mouseover(function() { 
     $(this).animate({ 
      left: '500px' 
     }); 
    }); 
}); 

Un millón de gracias!

Answer 1

Aquí hay un example. Cubre lo básico, supongo.

jQuery(function($) { 
    $('#img').mouseover(function() { 
     var dWidth = $(document).width() - 100, // 100 = image width 
      dHeight = $(document).height() - 100, // 100 = image height 
      nextX = Math.floor(Math.random() * dWidth), 
      nextY = Math.floor(Math.random() * dHeight); 
     $(this).animate({ left: nextX + 'px', top: nextY + 'px' }); 
    }); 
});