Question

I have an issue with my text flickering after load in this example:

look here: http://www.floatleft.dk/scounter

but then in the fiddle here it is not doing it.

anyone have an idea to why this is happening? the code is exact match.

Now with fiddle - i found out my problem only occurs if i have my background image enabled... anyone know why this happens? I have enabled the background image here so you can see the difference:

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();
});
Était-ce utile?

La solution

I found my issue - apparently i needed my ul positioned relative, this removed the flickr. i will update the code for future reference.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top