Text flickering after load
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">
<ul class="loop-info">
<li>text1</li>
<li>text2</li>
<li>text3</li>
<li>text4</li>
<li>text5</li>
</ul>
</div>
CSS
.info-wrap {
width:720px;
height:340px;
background-color:#FFF;
margin:0 auto;
margin-top: 100px;
position: relative;
}
.info-wrap .video-embed-wrap {
width:604px;
height: 340px;
float: right;
}
.info-wrap .info-background {
position: absolute;
top:0;
left: 0;
}
.info-wrap ul {
list-style: none;
}
.info-wrap .loop-info li {
display: none;
}
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();
});
No comments:
Post a Comment