CODEWITHSUNDEEP
jquerydebugging
flintsburg
flintsburg

Reputation: 209

Fade ticker bug

I'm using this:

JS

var aniSpd01 = 5000;

$(function() {
    var startIndex = 0;
    var endIndex = $('#trends li').length;
    $('ul#trends li:first').fadeIn(150);
    window.setInterval(function() {
        $('ul#trends li:eq(' + startIndex + ')').fadeOut(150);
        startIndex++;
        $('ul#trends li:eq(' + startIndex + ')').fadeIn(150);
        if (endIndex == startIndex) {
           startIndex = 0;
        }
   }, aniSpd01);
});

HTML

    <ul id="trends">
        <li><a href="#" title="">Lorem</a></li>
        <li><a href="#" title="">Ipsum</a></li>
        <li><a href="#" title="">Dolor</a></li>
    </ul>

CSS

ul#trends li {
position: absolute;
display: none;
}

But when the JS reaches the last item, after it, there is 5 seconds period with no content, then it goes back to the first item...

Also, when I switch tabs (Chrome) and go back to my tab, the "li"s switch like crazy.

Why's that :(

Upvotes: 0

Views: 104

Answers (1)

aquinas
aquinas

Reputation: 23796

Well, I don't have weird behavior in Chrome. As to your first question, it's because your if statement happens in the wrong place.

You should have:

 $('ul#trends li:eq(' + startIndex + ')').fadeOut(150);
 startIndex++;
 if (endIndex == startIndex) {
         startIndex = 0;
 }
 $('ul#trends li:eq(' + startIndex + ')').fadeIn(150);

Instead of what you have. You add the if AFTER your fade in which means that you were incrementing startIndex and trying to fade in an element that didn't exist.

http://jsfiddle.net/

Edit: Ah ha. After coming back to my jsfiddle after typing up this answer. I DID see the behavior in Chrome. That's weird. It's almost like the events are all queued up until you come back to the page. Weird.

Edit 2: Someone mentioning this issue and possible workaround: Chrome timeout problem with animation

Upvotes: 1

Related Questions