fadeOut after animate

by Reiot

HTML

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

CSS

body {
    width: 100%;
    height: 800px;
}
div{
    position: absolute;
    
    width: 100px;
    height: 100px;
}

.first {
    left: 0;
    top: 0;
    background: yellow;
    
}

.second {
    left: 100px;
    top: 25px;
    background: green;
    
}

.third {
    left: 200px;
    top: 50px;
    
    background: blue;
}

p.msg {
    position: absolute;
    left: 100px;
    top: 200px;
    font-size: 30px;
    color: red;
}

JavaScript

$(function() {

    $('body').click(function(e) {

        console.log(e.pageX, e.pageY);

        var classes = ['first', 'second', 'third'];

        $('<div/>', {
            'class': classes[Math.floor(Math.random() * classes.length)]
        }).appendTo('body').offset({
            left: e.pageX,
            top: e.pageY
        })
        .animate({
            top: "-=100px"
        }, {
            duration: 2000
        }).fadeOut('slow', function() {
            $(this).remove();
        });
    });

});