Increase height and click and fadeout

by kyllle

HTML

<ul class="myList">
    <li>This is number 1</li>
    <li>This is number 2</li>
    <li>This is number 3</li>
    <li>This is number 4</li>
    <li>This is number 5</li>
    <li>This is number 6</li>
</ul>

CSS

.myList > li {
    background: #dedede;
    margin-bottom: 5px;
    position: relative;
}

JavaScript

$(document).ready(function() {
    var $listItem = $('ul.myList > li');

    $listItem.each(function() {
        $(this).animate({
            width: $(this).width() * 2,
            height: $(this).height() * 2
        }, 1000);
    });

    $listItem.click(function() {
        $(this).animate({
            top: $(window).height() - $(this).height() - $(this).position().top,
            opacity: 0,
            height: 0,
            marginBottom: 0
        }, 1000);
    });
});