jquery - 带间隔和播放/暂停功能的小 div 推子

Question

我正在玩一个小推子。它适用于单个子元素，但元素中的元素不是：http: //jsfiddle.net/cz9a2/

应该：

<div class="fadein">
<div class="fadd"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
<div class="fadd"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></div>
<div class="fadd"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></div>
</div>

结果：（用萤火虫检查）

<div class="fadein">
<div class="fadd" style="display: block;"></div>
<div class="fadd" style="display: none;"></div>
<div class="fadd" style="opacity: 0.00000555164;"></div>
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" style="opacity: 0.00000555164;">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" style="opacity: 0.000298526;">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" style="opacity: 0.000298526;">
</div>

看来， :first-child 不是在另一个 div （ fadd ）之后淡化一个 div （ fadd ）的正确方法......

Answer 1

我对函数进行了一些修改，以使所有代码都在间隔内执行，因此它淡入淡出正确的项目。

看看这个小提琴：http: //jsfiddle.net/johnkoer/cz9a2/48/

 var pauseplay;

function startFader() {

    //Fade out the first visible item
    $x = $(".fadd:visible").fadeOut(1000);

    // Get the next sibling
    $next = $x.next();

    // if the next is not an element, go back to the first one
    if ($next.length == 0) $next = $(".fadd:first-child");

    // Fade the next one in
    $next.fadeIn(1000);
}

function stopFader() {
    window.clearInterval(pauseplay);
    console.log("stop");
}

$('.fadein .fadd:gt(0)').hide();

pauseplay = window.setInterval(startFader, 2000);


var $button = $('#toggler');
$button.toggle(function() {
    stopFader();
    $(this).toggleClass('playin pausin');
}, function() {

    $(this).toggleClass('pausin playin');

    pauseplay = window.setInterval(startFader, 2000);

});​