设置 jquery 计时器

Question

$("#main .landkaart ul li > ul").hide();

$(".landkaart ul li").hover(function()
{
    if($("ul",this).hasClass("open") )
    {
        $("ul", this).fadeOut().removeClass('open');
    }
    else
    {   
        $("ul", this).fadeIn().addClass('open');
    }
});

我有这样的 html 结构：

<div class="landkaart">
    <ul>
        <li><a class="doetinchem" title="Vestiging Doetinchem" href="vestiging.html">Doetinchem</a>
            <ul class="doetinchem">
                <li><h2>Doetinchem</h2></li>
                <li>Gildenbroederslaan 4</li>
                <li>Postbus 196</li>
                <li>7000 AD Doetinchem</li>
                <li>Telefoon (0314) 37 70 00</li>
                <li>Telefax (0314) 37 70 05</li>
                <li>doetinchem@kabaccountants</li>
            </ul>
        </li>
        <li><a class="didam" title="Vestiging Didam" href="vestiging.html">Didam</a>
            <ul class="didam">
                <li><h2>Didam</h2></li>
                <li>Parallelweg 29</li>
                <li>Postbus 50</li>
                <li>6940 BB Didam</li>
                <li>Telefoon (0316) 22 15 08</li>
                <li>Telefax (0316) 22 78 30</li>
                <li>didam@kabaccountants</li>
            </ul>
        </li>
    </ul>
</div>

当我将鼠标悬停在 li 项目上时。 ul 项目现在显示。但现在。我会让这一切自动进行。我怎样才能在这个功能上制作一个计时器？每 5 秒出现另一个（“ul”，这个）项目

谢谢

Answer 1

像这样：

示例： http://jsfiddle.net/eSk3X/1/

var $subUl = $(".landkaart ul li > ul").hide();
$subUl.eq(0).show();

var len = $subUl.length;

var index = 0;

setInterval(function() {
    $subUl.eq( index ).removeClass('open').fadeOut(function() {
            index = (++index % len);
            $subUl.eq( index ).addClass('open').fadeIn();
        }
    );
}, 5000);