-2

ページの最初の読み込み時に jQuery の div から div への追加に問題があります。

望ましい効果: 基本的に、現在の div をフェードアウトさせ、一時停止してから、次の div をフェードインさせる必要があります。

結果: 新しく追加された div が、追加される div の先頭にジャンプし、前の div が強制的に下に移動し、見苦しくなります。関数にもかかわらず、前の div がフェードアウトを完了する前に div がフェードインされているかのよう.delay()です。

元の jQuery コード:

$(document).ready(function(){
$("#blurb > div:gt(0)").hide();
setInterval(function() { 
$('#blurb > div:first')
.fadeOut(1000)
.delay(1000)
.next(1)
.fadeIn(1000)
.end(1)
.appendTo('#blurb');
},  5000);
});

関連する CSS:

#blurb{
float:right;
text-align:right;
width:300px;
font-size:16px;
margin-right:-20px;
height:100px;
z-index:-100;
}
#blurb > div{
position:relative;
z-index:-100;
height:100px;
}

関連する HTML:

<div id="blurb">
<div>
<b style="font-size:18px;color:#EF116A;">Having problems?</b><br>
Please call our Sheffield-based support team on <b>0114 303 3232</b>.
</div>
<div>
<b style="font-size:18px;color:#EF116A;">Having problems?</b><br>
Please email our Sheffield-based support team at <b>support@ask4.com</b>.
</div>
<script>
jQuery script as above
</script>
</div>

（未検証などは無視してください。これは単なる実験です）

どうもありがとう、

オリバー

4

1 に答える 1

0

現在のアニメーションが完了した後に次の div をフェードインさせたい場合は、fadeOut メソッドのコールバック コールバック関数でnextdiv のフェードインを処理する必要があります。

    $(document).ready(function() {
    $("#blurb > div:gt(0)").hide();
    setInterval(function() {
        $('#blurb >div:first')
            .fadeOut(1000 , function() {
                 $(this).next(1).delay(1000).fadeIn(1000)
                                .end(1).appendTo('#blurb');
            })  
    }, 5000);
});

</p>

フィドルをチェック

于 2012-11-13T18:28:08.620 に答える