.fadeIn(）和.fadeOut(）函数已损坏

我使用的是Chris Coyier的这张非常基本的渐变幻灯片：http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

一切都很好，除了我想要多个幻灯片，每个都是缩略图。所以当我添加多个相同的东西时，它就坏了。我注意到它使用了slideshow的id，并且id必须是唯一的，所以我将其更改为class。现在一切正常，但似乎破坏了fadeIn()和fadeOut()的功能？或者至少，它似乎就是这么做的。这是一把小提琴：http://jsfiddle.net/QRZKE/

HTML：

<div class="thumb" id="first">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="second">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="third">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="fourth">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="fifth">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>

CSS:

    .thumb {
        position: relative;
        width: 240px;
        height: 240px;
        padding: 10px;
        background: white;
        box-shadow: 0 0 20px rgba(0, 0, 0, .4);
    }
    .thumb > div {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 2;
    }
    .thumb > span {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 3;
        -webkit-transition: all .65s ease-in;
        -moz-transition: all .65s ease-in;
        -ms-transition: all .65s ease-in;
        -o-transition: all .65s ease-in;
        transition: all .65s ease-in;
    }
    .thumb > span:hover {
        opacity: 0;
    }
    .thumb img {
        height: 240px;
        width: 240px;
    }

JavaScript:

$(document).ready(function() {
$(".thumb > div:gt(0)").hide();
setInterval(function() {
    $(".thumb > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo(".thumb");
}, 2500);
});

注意：我在一些span中添加了一张图片，它覆盖了幻灯片放映，你必须将鼠标悬停在上面才能使其消失（就好像在悬停在上面之后开始幻灯片放映一样）。

有什么想法吗？任何帮助都将不胜感激。

编辑：我发现如果我删除其他幻灯片（只有一个），渐变效果会很好。我只加了一次倍数。但是类可以是非唯一的，对吧？那么，为什么剧本会被打破呢？（这并不是说实际的脚本正在崩溃，这只是渐变效果，否则滑块工作得很好！）