jQuery列表简单淡入淡出幻灯片问题

Question

我使用jquery创建了一个简单的幻灯片效果。这是代码

HTML （我的条件是HTML代码无法更改。）

<div class="wrp">
    <ul>
        <li>lorem ipsum one</li>
        <li>lorem ipsum two</li>
        <li>lorem ipsum three</li>
        <li>lorem ipsum four</li>
        <li>lorem ipsum five</li>
    </ul>
</div>

的jQuery

jQuery(function () {
    var list_slideshow = jQuery(".wrp ul"),
        listItems = list_slideshow.children('li'),
        listLen = listItems.length,
        i = 0,
        changeList = function () {
            listItems.eq(i).fadeOut(300, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(300);
            });
        };
    listItems.not(':first').hide();
    setInterval(changeList, 1000);
});

Jsfiddle链接：http://jsfiddle.net/6Br9B/

我的问题是，如果我打开当前页面（标签页），那么幻灯片工作正常。但是当我切换到其他选项卡然后返回页面时（比如5秒后），幻灯片项目将显示为堆叠列表。请参阅http://goo.gl/aefEIk

知道为什么会这样吗？ 任何帮助将非常感激 感谢

Answer 1

我建议你缩短你的代码：

var i = 0;
function changeList() {
    var list = $('.wrp ul li');
    list.eq(i).fadeIn(1000).fadeOut(300, function() {
        i++;
        if(i % list.length == 0) {
            i = 0;
        }
        changeList();
    });
}
changeList();

<强> Updated Fiddle

Answer 2

试试这个，将一些CSS设置为此ul。

DEMO http://jsfiddle.net/6Br9B/2/

CSS

ul {
    height:27px;
    overflow:hidden;
    background:green;
}