Ball Animation Demo

by pat spag

HTML

<div id='position'>position</div>
<p><button id="go">Stop </button></p>
<img src="http://fc04.deviantart.net/images3/i/2004/099/f/f/Green_Grass___Perspective.jpg" />
<div class='ball'>
    <img id='ball' src="http://www.freestockphotos.biz/pictures/15/15872/Illustration+of+a+soccer+ball.png" width='100' height='100' />
</div>

<div id='myDiv'>mydiv</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;
}

JavaScript

var timerInterval = 100;

var timer = window.setInterval(function() { ballTimer() }, 
                              timerInterval);  
document.getElementById("ball").addEventListener("click", function() {
     window.setInterval(function() { ballTimer() }, 
                              timerInterval); 
    
}, false);

$( "#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 );
    }

    
}