0

私は小さなフェーダーで遊んでいます。単一の子要素では正常に機能しますが、要素内の要素では機能しません：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>

結果:(firebugでチェック）

<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）をフェードする正しい方法ではないようです...

4

1 に答える 1

0

すべてのコードが間隔で実行されるように関数を少し作り直したので、適切なアイテムがフェードインおよびフェードアウトします。

このフィドルを見てください：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);

});​
于 2012-09-27T20:22:13.587 に答える