Quadratic Easing Test

by Reiot

HTML

<div id="board">
    <div id="marker">
        <div class="shadow-small"></div>​​
        <div class="airborne"></div>           ​​
    </div>
    
    <div id="marker2">
    </div>​
</div>

CSS

#board{
    position: relative;
    left: 10px;
    top: 10px;
    width: 100%;
    height: 500px;
    background: gray;
}

#marker, #marker2 {
    position: absolute;
    border: 1px solid green;
}

#marker {
    left: 100px;
    top: 100px;
    width: 10px; height:10px; background: red;​
}

.shadow-small {
    position: absolute;
    left: -38px;
    top: -24px;
    width: 76px;
    background: transparent url(http://reiot.dyndns.org:8080/images/sprites/shadow.png) no-repeat -0px -0px;
    height: 42px;
    border: 1px solid black;​
}

.airborne {    
    background: transparent url(http://reiot.dyndns.org:8080/images/sprites/unit/airborne.png) no-repeat -2px -2px;
    position: absolute;
    top: -124px; 
    left: -59px;
    width: 92px;
    height: 124px;
    border: 1px dotted white;​
}

#marker2 {
    position: absolute;
    width:10px;
    height: 10px;​
    left: 200px;
    top: 200px;
    background: red;
    border: 1px dotted white;​
    
}

#marker2:before, #marker:after{
   position:absolute;
   z-index:-1;
   top:0;
   left:0;
   right:0;
   bottom:0;
}​

#marker2:before{
    content:"";
    
    left: -38px;
    top: -24px;
    
    width: 76px;
    background: transparent url(http://reiot.dyndns.org:8080/images/sprites/shadow.png) no-repeat -0px -0px;
    height: 42px;
    
    border: 1px solid black;​
}

#marker2:after{
    content:"";
    
    left: -38px;
    top: -24px;
    
    width: 76px;
    background: transparent url(http://reiot.dyndns.org:8080/images/sprites/shadow.png) no-repeat -0px -0px;
    height: 42px;
    
    border: 1px solid black;​
}

JavaScript

$(function() {
    $('#marker').add('#marker2').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
        });
    });
});