Fading Image Transition

A quick script to create fading image transition.

by Travis

HTML

<ul id="images">
<li><img src="http://farm8.staticflickr.com/7046/7009466993_a7d614c49a_o.jpg" alt="Dark Souls Wall 01" /></li>
<li><img src="http://farm8.staticflickr.com/7247/6861239372_2483b4d5f9_o.jpg" alt="Dark Souls Wall 02" /></li>
<li><img src="http://farm8.staticflickr.com/7067/7004909221_0d13bac771_o.jpg" alt="Dark Souls Wall 03" /></li>
<li><img src="http://farm8.staticflickr.com/7194/6858792268_01c2a54c7e_o.jpg" alt="Dark Souls Wall 04" /></li>   
</ul>

CSS

ul {position:relative;}
li {position:absolute; top:0px;}
img {width:500px;}

JavaScript

$(function(){
    var images = $('#images li');
    
    var count = 0;
    
    images.on('click', function(){
        if (count < 3) {
            $(this).fadeOut();
            count++;
        }         
    });
});