1

この例では、ロード後にテキストがちらつくという問題があります。

ここを見てください：http://www.floatleft.dk/scounter

しかし、ここのフィドルではそれを行っていません。

なぜこれが起こっているのか誰にも分かりますか？コードは完全一致です。

フィドルを使用すると、背景画像が有効になっている場合にのみ問題が発生することがわかりました...なぜこれが起こるのか知っていますか? ここで背景画像を有効にしたので、違いがわかります。

HTML

    <div class="info-wrap">         
                    <div class="info-background">
                        <img src="img/info-bgg.png" alt="info-bgg" width="360" height="340" />
                    </div>

                    <ul class="loop-info">
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>

                    </ul>
                </div>

CSS

    .slide-wrap {
    width:720px;
    height:340px;
    position: relative;
    background-color:#F60;
    margin: 0 auto;

    margin-top: 100px;
}

.video-wrap {
    width:720px;
    height:340px;
    background-color:#000;
}

.info-wrap {
    width:360px;
    height:340px;
    background-color:#666;
    position: absolute;
    top:0;
    left: 0;
}
.info-wrap .video-embed-wrap {
    width:604px;
    height: 340px;
    float: right;
    background-color:#000;
}
.info-wrap .info-background {
    position: absolute;
    top:0;
    left: 0;
}
.info-wrap ul {
    list-style: none;
    position: relative;
}
.info-wrap .loop-info li {
    display: none;
    font-size: 30px;
    color:#FFF;
}

Jクエリ

function fadeInSequence($one) {
    //default to the first one list items
    if ($one == null) $one = $('.loop-info>li:lt(1)');

    //fade in the 1 found
    $one.fadeIn(2000, function () {
        //fade out the 1 after fadein and start
        $(this).fadeOut(2000);
    }).promise().done(function () {
        if ($one.last().nextAll(':lt(1)').length) {
            //Same function, next 1 items
            fadeInSequence($one.last().nextAll(':lt(1)'));
        } else {
            //Same function, from the beginning if none are left
            fadeInSequence();
        }
    });
}

$(function () {
    //start the infinite looping
    fadeInSequence();
});
4

1 に答える 1

1

私は自分の問題を見つけました - どうやら私は相対的に配置されたulが必要だったようです。これによりflickrが削除されました。今後の参考のためにコードを更新します。

于 2013-08-20T12:10:40.590 に答える