Quadratic Easing Test

by Reiot

HTML

<div id="board">
    <div id="block"></div>
</div>

CSS

#board{
    position: relative;
    left: 10px;
    top: 10px;
    width: 100%;
    height: 500px;
    background: gray;
}
#block {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 10px;
    height: 10px;
    background: red;
    box-shadow: 1px 1px 1px black;
}

JavaScript

$(function(){
    $('#block').draggable();
    $('#board').click(function(event){
        var offset = {
            left: event.pageX - $(this).offset().left, 
            top: event.pageY - $(this).offset().top
        };
        
        $('#block').animate({
            left: offset.left,
            top: [offset.top, 'easeOutBounce']
        }, {
            duration: 1000
        });
    });
});