Smooth injection of the list elements

by spliter

HTML

<div id="infostream-items">
    <div id="new-msg-tmp">
        <!-- New items injected with AJAX -->
        <div class="infostream-entry">New Item 1</div>
        <div class="infostream-entry">New Item 2</div>
    </div>
    <div class="infostream-entry">Item 1</div>
    <div class="infostream-entry">Item 2</div>
    <div class="infostream-entry">Item 3</div>
</div>

<a href="#" id="new-messages-counter">Load new items</a>

CSS

/**
 * Smooth elements injection
 */

/* just a cosmetics */
body {padding: 0; margin:0}
.infostream-entry {
    background: Orange;
    padding:0 .5em;
    margin: 0 0 2px;
    height: 40px;
    line-height: 40px;
}
#new-msg-tmp .infostream-entry {
    background: Olive;
}

/* Biziness */
#infostream-items {
    padding:0;
    -webkit-transition: padding-top 0s linear;
    transition: padding-top 0s linear;
}
.infostream-entry {
    position: relative;
}
#new-msg-tmp {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;
    -webkit-transition: opacity .2s linear .3s;
    transition: opacity .2s linear .3s;

}
#infostream-items.newMessages {
    padding-top: 84px;
    -webkit-transition: padding-top .3s linear;
    transition: padding-top .3s linear;
}
#infostream-items.newMessages #new-msg-tmp {
    opacity: 1;
}

JavaScript

$('#new-messages-counter').click(function(e) {
    e.preventDefault();
    $('#infostream-items').addClass('newMessages');
    
    setTimeout(function () {
        $('#infostream-items')
            .removeClass('newMessages')
            .children()
            .eq(0)
            .children()
            .unwrap();
    }, 3000);
});