Ball Animation Demo

by Ebony McCoy

HTML

<img src="http://res.freestockphotos.biz/pictures/14/14050-illustration-of-a-pot-of-gold-and-a-rainbow-for-saint-patricks-day-pv.png" width='400' height='400' />
<div class='ball'>
    <img id='ball' src="http://res.freestockphotos.biz/originals/14/14044-illustration-of-a-laughing-leprechaun-or.png" width='100' height='100' />
</div>

CSS

.ball {
    position: absolute;
    top: 100px;
    left:50px;
    width: 100px;
    height:100px;
    background-color: transparent;
    }
.wall {
    position: absolute;
    top:150px;
    left:100px;
    width: 450px;
    height:450px;
    background-color: yellow;
}
.selected {
    color: white;
    background:green
}

JavaScript

var timerInterval = 100;

var timer = window.setInterval(function() { ballTimer() }, 
                              timerInterval);  

$( "#go" ).click(function() {
   window.clearInterval(timer);
});

function ballTimer()
{
  moveBall($('.ball'));   
}

function moveBall(obj)
{
    var left = obj.offset().left;
    var top = obj.offset().top;
    var moveDuration = 50;
    $('#position').html('left:' + left  + ' top:' + top);
    
    if ((left <= 250)&&(top<=100))
    {
       obj.animate({ "left": "+=10px" }, moveDuration );
        return;
    }

    if ((left >= 250)&&(top<=250))
    {
       obj.animate({ "top": "+=10px" }, moveDuration );
        return;
    }
    if ((left >= 50)&&(top>=250))
    {
       obj.animate({ "left": "-=10px" }, moveDuration );
        return;
    }
    if ((left<=50)&&(top>=100))
    {
       obj.animate({ "top": "-=10px" }, moveDuration );
    }

    
}