CarouselBox

by nirmaljpatel

HTML

<div class="panel">
    <div> </div>
</div>
<ul class="items">
    <li>First <a href="#" class="delete">delete</a>
        <div class="desc">Description First</div>
    </li>
    <li>Second <a href="#" class="delete">delete</a>
        <div class="desc">Description Second</div>
    </li>
    <li>Third <a href="#" class="delete">delete</a>
        <div class="desc">Description Third</div>
    </li>
    <li>Fourth <a href="#" class="delete">delete</a>
        <div class="desc">Description Fourth</div>
    </li>
    <li>Fifth <a href="#" class="delete">delete</a>
        <div class="desc">Description Fifth</div>
    </li>
    <li>Sixth <a href="#" class="delete">delete</a>
        <div class="desc">Description Sixth</div>
    </li>
    <li>Seventh <a href="#" class="delete">delete</a>
        <div class="desc">Description Seventh</div>
    </li>
    <li>Eight <a href="#" class="delete">delete</a>
        <div class="desc">Description Eight</div>
    </li>
    <li>Ninth <a href="#" class="delete">delete</a>
        <div class="desc">Description Ninth</div>
    </li>
</ul>
<button class="append">Add item</button>
<!--[if lte IE 9]>
    <style type="text/css">
        /* Old IE doesn't support CSS transform or transitions */
        .items li {
            position: relative
        }
    </style>
<![endif]-->

CSS

body {
    font-family: Arial;
    overflow: hidden;
}
.panel{
    border: solid 1px red;
    position: absolute;
}
.items {
    list-style-type: none;
    padding: 0;
    position: relative;
    border: 1px solid black;
    height: 290px;
    overflow-y: auto;
    overflow-x: hidden;
    
}
.items li {
    height: 50px;
    width: 100%;
    line-height: 50px;
    padding-left: 20px;
    border: 1px solid silver;
    background: #eee;
}

JavaScript

$(function () {
    $(document.body).on("click", "li", function (evt) {
        evt.preventDefault();
        console.log("li clicked");
        var $ul = $(this).closest('ul');
        if ($ul.hasClass("blur")) {
            console.log($ul.hasClass("blur"));
            $ul.removeClass('blur');
            if ($origLi) {
                $origLi.removeClass("moveToTop");
                //$origLi.css("transform", origPos);
                //$origLi = null;
                $origLi.removeClass("topLi");
            }
        } else {
            $ul.addClass("blur");
            $origLi = $(this).closest('li');
            //origPos = $origLi.css("transform");
            //$origLi.css("transform", topPos);
            $origLi.addClass("moveToTop");
            $origLi.one('webkitTransitionEnd', function() {
    console.log("Transition end:");
    $origLi.addClass("topLi");
});
        }
    });
    $(document.body).on("click", ".delete", function (evt) {
        evt.preventDefault();
        $(this).closest("li").remove();
    });

    $(".append").click(function () {
        $("<li>New item</li>").insertAfter($(".items").children()[2]);
    });

});