Cross fade test

Click a thumbnail below and the big image cross fades to the clicked image

face1
face2
face3
face3

The jQuery for fade transition on click

    var hasFaded = 1;
    $(".small-img img").click(function () {
        var clickedImage = this.src.replace("_tn", "");
        var topImg = $("#cykler .top-img");
        var secondImg = $("#cykler .second-img");
        if (hasFaded) {
            hasFaded = 0;
            secondImg.attr('src', clickedImage);
            topImg.fadeOut(800, function () {
                topImg.css('z-index', 10).show().removeClass('top-img').addClass('second-img');
                secondImg.css('z-index', 20).removeClass('second-img').addClass('top-img');
                hasFaded = 1;
            });
        }
    });

The jQuery for timed fade transition

    
    var count = 1;
    setInterval(function(){
        $('#timed .second-img').attr("src", "../images/face"+count+"_tn.jpg");
        var topImg = $("#timed .top-img");
        var secondImg = $("#timed .second-img");
        topImg.fadeOut(800, function () {
            topImg.css('z-index', 10).show().removeClass('top-img').addClass('second-img');
            secondImg.css('z-index', 20).removeClass('second-img').addClass('top-img');
        });
        count++;
        if(count>4){
            count=1;
        }
    }, 1500);