Awesome button that runs away from mouse.

by Joe Pea

HTML

<button id="emcee">Begin the Festivities</button>
<div id="box"></div>

CSS

div#box
{
    width: 100px;
    height: 100px;
    background-color: #00FF00;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 1;
}

button#emcee
{
    position: relative;
    z-index: 2;   
}

JavaScript

var caller = $("#emcee"),
    box = $("#box");

function foo()
{
    var randX = Math.floor(Math.random() * (window.innerWidth - 100));
    var randY = Math.floor(Math.random() * (window.innerHeight - 100));
    console.log([randX, randY]);
    caller.stop().animate({"left": randX + "px", "top": randY + "px"});

}

$(document).ready(function() {
    
    caller.on('mouseenter', foo);
    caller.on('click', function(){
        alert('clicked!');
    });
    
});