Bounce animation - jquery

by Ritesh Pandey

HTML

<div class="wall"></div>
<div class="bounce"></div>
<div class="floor"></div>

CSS

.wall{
    border-left: 3px solid #000;
    height: 200px;
    display: inline-block;
}
.bounce {
    background-color: green;
    height: 100px;
    width: 100px;
    display: inline-block;
    position: relative;
}
.floor {
    border-bottom: 3px solid black;
}

JavaScript

$(function () {
    $(".bounce").animate({
        'left': '100px'
    }, function () {
        $(".bounce").animate({
            'left': '0px'
        }, function () {
            $(".bounce").animate({
                'left': '50px'
            }, function () {
                $(".bounce").animate({
                    'left': '00px'
                }, function () {
                    $(".bounce").animate({
                        'left': '25px'
                    }, function () {
                        $(".bounce").animate({
                            'left': '00px'
                        })
                    })
                })
            })
        })
    })
})