Нужно анимировать изображение, чтобы отойти от позиции курсора при каждом наведении курсора мыши?

Question

Я пытаюсь анимировать изображение коробки, изменяя его положение при наведении мыши.

Я могу заставить его двигаться один раз, но мне нужно настроить его так, чтобы он двигался каждый раз, когда кто-то наводит мышью наобраз.Я хочу, чтобы пользователи «преследовали» рамку вокруг экрана.

Желательно, чтобы анимация была зациклена, чтобы пользователь никогда не смог поймать изображение?

Вот примерчто у меня до сих пор , и ниже мой код jQuery:

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

Спасибо миллион!

Answer 1

Вот пример . Это охватывает основы, я думаю.

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