Animated Cart

by Web Carvers

HTML

<div class="cartCount">0</div>
<div class="element"></div>
<div class="element one"></div>
<div class="element two"></div>
<div class="element three"></div>

CSS

.cartCount{
    display:block;
    padding:5px;
    background:#708792;
    color:#fff;
    font-family: Arial, sans-serif;
    position:absolute;
    top:20px;
    left:50px;
    border-radius:5px;
    font-size:14px;
}
.element, .element1, .element2{
    display:block;
    width:100px;
    height:150px;
    background:#c6ecff;
    position:absolute;
    top:150px;
    left:10px;
    cursor:pointer;
}
.one{
    top:150px;
    left:130px;
}
.two{
    top:150px;
    left:250px;
}
.three{
    top:150px;
    left:370px;
}

JavaScript

var count = 0;
$(".element").click(function(){
    count++;
    $("body").append("<div class='ghost'></div>");
    $(".ghost").css({
        "height": $(this).height() + "px",
        "width" : $(this).width() + "px",
        "top" : ($(this).offset().top-2) + "px", 
        "left" : ($(this).offset().left-2) + "px",
        "position" : "fixed",
        "border" : "#000 dashed 2px",
        "border-radius" : "5px"
    });
    var pad = $(".cartCount").css("padding-top");
    $(".ghost").animate({
        top: ($(".cartCount").offset().top-1) + "px",
        left: ($(".cartCount").offset().left-1) + "px",
        width: ($(".cartCount").width() + parseInt(pad.substring(0, pad.length - 2))*2 - 1) + "px",
        height: ($(".cartCount").height() + parseInt(pad.substring(0, pad.length - 2))*2 - 1) + "px"
    }, 1000, function(){
        $(".ghost").fadeOut(300, function(){
        $(this).remove();
        });
        $(".cartCount").text(count);
    });
});