.fadeIn() и .fadeOut() функция сломана?

Question

Я использую этот очень простой замирание слайд-шоу Крис Coyier'S: http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

Все работает отлично, за исключением того, я хочу несколько слайдов, каждый из которых эскиз. Поэтому, когда я добавил несколько одинаковых вещей, он сломался. Я заметил, что он использует idslideshow, а id s должен быть уникальным, поэтому я сменил его на 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 s, которое закрывает слайд-шоу, и вам нужно навестить его, чтобы он ушел (как будто для запуска слайд-шоу после зависания над ним).

Любые идеи? Любая помощь приветствуется.

EDIT: Я выяснил, что если удалить другие слайд-шоу (имеющие только один), эффект затухания будет работать нормально. Это только один раз, когда я добавляю несколько. Но классы могут быть неединственными, не так ли? Так почему же сценарий ломается? (И это не похоже на то, что настоящий скрипт ломается, это только эффект затухания, иначе слайдер отлично работает!)

Answer 1

Я думаю, что проблема заключается в том, что appendTo('.thumb') добавит все ваши ползунки. И ваша вещь диапазона позволяет повторить цикл между 2-м и 3-м картинками, никогда не пересматривая 1-й. Я бы избавился от css, чтобы подделка слайд-шоу не показывалась и добавляла интервал при зависании. Я бы сделал это так (http://jsfiddle.net/QRZKE/18/):

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 img { 
     height: 240px; 
     width: 240px; 
    } 

HTML

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

Javascript

$(document).ready(function() { 
    var interval; 
    $('.thumb').each(function() { 
     var id = $(this).attr('id'); 
     $("#" + id + " > div:gt(0)").hide(); 
    }); 

    $('.thumb').hover(function() { 
     var id = $(this).attr('id'); 
     console.log(id); 
     interval = setInterval(function() { 
      $("#" + id + " > div:first") 
       .fadeOut(1000) 
       .next() 
       .fadeIn(1000) 
       .end() 
       .appendTo("#" + id); 
     }, 2500); 
    }, function() { 
     clearInterval(interval); 
    });  
}); 

Answer 2

Если бы я был вами, я бы удалил пролеты и расширил javascript. Например, вы можете использовать mouseenter: function(){ // start interval} и сбросить его с помощью mouseleave: function(){ // reset interval }.

Хотя это не может решить вашу проблему, вы получили меньше коды беспокоиться :)