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');
    }
});

I have this html structure:

<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>

When i hover over a li item. The ul item show now. But now. I would make that this go automatically. How can i make an timer on this function? That every 5 sec come an other (“ul”,this) item

Thanks

Answer 1

Like this:

Example: 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);