2010-11-18 88 views
1
$("#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結構:設置一個jquery計時器

<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>[email protected]</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>[email protected]</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

當我將鼠標懸停在鋰項目。 ul項目現在顯示。但現在。我會讓它自動運行。我怎樣才能使這個功能的計時器?即每5秒來的其他( 「UL」,此)項

由於

回答

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