2010-11-18 83 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);