Fade list elements

HTML

<ul class="selectable"> 
<li>Maecenas molestie accumsan tortor, ut fermentum mi mattis porta.</li> 
<li>Pellentesque dapibus metus et massa hendrerit nec elementum mi sollicitudin.</li> 
<li>Vestibulum at ante a quam consequat commodo in sed orci.</li> 
<li>Aliquam a nulla lorem, vel fringilla dui.</li> 
<li>Nullam vel turpis id enim rhoncus blandit vel id tellus.</li> 
<li>Fusce eget mauris odio, eu convallis tellus.</li> 
<li>Sed rhoncus tempor turpis, in sollicitudin velit suscipit interdum.</li> 
</ul>

CSS

body {
    background-color: #fff;
    font-family: Verdana, arial, sans-serif;
}

.selectable {
    width: 90%;
    margin: 50px auto;
}

.selectable li {
    font-size: 12px;
    background-color: #222;
    color: #fff;
    margin: 10px 0;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0 0 5px #333;
    cursor: pointer;
}

.selectable li:hover,
.selectable li.selected {
    color: #f0e68c;
}

JavaScript

$(function(){
    $('.selectable li').click (function(){
        $(this).addClass ('selected').fadeTo(0, 1).siblings().fadeTo('slow', 0.2).removeClass ('selected');
        return false;
    });
    $('body').click(function() {
        $('.selectable li').removeClass ('selected').fadeTo('slow', 1);
    });
});