Czy chcesz animować obraz, aby odejść od pozycji kursora na każdym najeździe myszy?

Question

Próbuję animować obraz pudełka, zmieniając jego pozycję przy najechaniu myszą.

Mogę go przenieść, ale muszę go skonfigurować, aby poruszał się za każdym razem, gdy ktoś podskoczy na obrazku. Chcę, aby użytkownicy "ścigali" pole wokół ekranu.

Najlepiej, aby animacja była zapętlana, aby użytkownik nigdy nie mógł przechwycić obrazu?

Oto an example of what I have so far, a poniżej jest mój kod jQuery:

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

Dzięki miliona!

Answer 1

Oto example. Obejmuje to podstawy, jak sądzę.

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