Question

我在本例中加载后文本闪烁有问题：

看这里：http://www.floatleft.dk/scounter

然后在fiddle这里没有这样做。

任何人都知道为什么会发生这种情况？代码完全匹配。

现在有小提琴 - 我发现我的问题只发生在我启用了我的背景图像...有人知道为什么会发生这种情况吗？我启用了背景图片here，因此您可以看到差异：

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;
}

JQUERY

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();
});

Answer 1

我发现了我的问题 - 显然我需要我的ul定位亲属，这删除了flickr。我将更新代码以供将来参考。

加载后文本闪烁

1 个答案: