Animation

Bouncing animation example

by Chris LaFrombois

HTML

<button id="startButton">Start Jumping</button>
<img id="myImg" src="http://www.worthofweb.com/blog/wp-content/uploads/2013/05/5269444_300.jpg" />
<div id="oval"></div>
<br>

CSS

#startButton {
    left: 30%;
    position: absolute;
}
#myImg {
    border-radius: 100px;
    top: 45%;
    position: absolute;
    z-index:10;
    left: 18%;
    width: 200px;
}
#oval {
    width: 212px;
    height: 50px;
    background: #DDDDDD;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: 150px;
    margin-left: -113px;
    -moz-border-radius: 226px / 50px;
    -webkit-border-radius: 226px / 50px;
    border-radius: 226px / 50px;
}

JavaScript

$(document).ready(function () {

    setInterval(function () {
        $('#myImg').animate({
            'marginTop': "-=35px"
        }, "slow");
        $('#myImg').animate({
            'marginTop': "+=35px"
        }, "slow");
    }, 1000 / 30);
    setInterval(function () {
        $('#oval').animate({
            'width': "-=10px",
                'height': "-=10px"
        }, "slow");
        $('#oval').animate({
            'width': "+=10px",
                'height': "+=10px"
        }, "slow");
    }, 1000 / 30);
});