Make a run away button in jQuery

Question

I wanted to create a page with a simple button which runs away from the user when he tries to click it. Lets call it the Run away button?

Is there a simple 'jQuery' snippet which will allow me to do the same?

Regards, Karan Misra

Answer 1

$('button').hover(function()
{
    $(this).css('top', rand(1,1000) + 'px').css('left', rand(1,1000) + 'px');
});

No plugin needed.

Answer 2

Catch me if you can

<button id="theRunAwayButton"></button>

button {
    position: absolute;
       background: url(http://t0.gstatic.com/images?q=tbn:6JxQilywV2GyxM:http://images.clipartof.com/small/7038-Baseball-Mascot-Cartoon-Character-Running-Poster-Art-Print.jpg);
    width: 127px;
    height: 111px;
}

var width = $(window).width() - 127;
var height = $(window).height() - 111;

function run() {
    var top = Math.random() * height;
    var left = Math.random() * width;
    $('#theRunAwayButton').css('top', top + 'px').css('left', left + 'px');
}

$(document).ready(function() {
    $('#theRunAwayButton').mouseover(run);
    $('#theRunAwayButton').mousemove(run);
});