Question

I’m trying to animate an image of a box by changing it’s position on mouseover.

I can get it to move once but I need to set it up so that it moves everytime someone mouses over the image. I want to make the users ‘chase’ the box around the screen.

Preferably the animation would loop so that a user can never catch the image ?

Here is an example of what I have so far, and below is my jQuery code:

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

Thanks a million!

Answer 1

Here is an example. It covers basics I guess.

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