设置一个jquery计时器

时间:2010-11-18 13:55:48

标签: jquery timer

$("#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”,这个)项目

谢谢

1 个答案:

答案 0 :(得分: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);