Question

我有一些代码用于创建一个简单的选项卡式Jquery菜单。目前整个<ul>正在滑入，我希望所选<li>中的每个<ul>项目都会在每个$(function() { var tabMenu = $('div#showcase-content > ul') tabMenu.hide().filter(':first').show(); $('ul.tabbedMenu a').click(function() { tabMenu.hide(); tabMenu.filter(this.hash).delay(300).show("drop"); }).filter(':first').click(); });之间略微停顿，而不是以一个为单位。

jQuery代码是：

<div id="showcase">
    <div id="showcase-content">
        <ul class="tabNavigation" id="intro">
            <li class="active"><a title="proj1" href="#zonkey"><img alt="" src="images/project-logos/freesound.png" /><br />Zonkey Media</a></li>
            <li><a title="proj2" href="#freeside"><img alt="" src="images/project-logos/freesound.png" /><br />Freeside Media</a></li>
            <li><a title="proj3" href="#windy"><img alt="" src="images/project-logos/freesound.png" /><br />Windy Arbour</a></li>
         </ul>
         <ul class="tabNavigation" id="design">
             <li><a title="proj4" href="#american"><img alt="" src="images/project-logos/freesound.png" /><br />American Football</a></li>
             <li><a title="proj5" href="#minus"><img alt="" src="images/project-logos/freesound.png" /><br />Minus the Bear</a></li>
             <li><a title="proj6" href="#manchester"><img alt="" src="images/project-logos/freesound.png" /><br />Manchester Orchestra</a></li>
             <li><a title="proj7" href="#brand"><img alt="" src="images/project-logos/freesound.png" /><br />Brand New</a></li>
             <li><a title="proj8" href="#glassjaw"><img alt="" src="images/project-logos/freesound.png" /><br />Glassjaw</a></li>
             <li><a title="proj9" href="#set"><img alt="" src="images/project-logos/freesound.png" /><br />Set your Goals</a></li>
         </ul>
         <ul class="tabNavigation" id="print">
             <li><a title="proj10" href="#crystal"><img alt="" src="images/project-logos/freesound.png" /><br />Crystal Fighters</a></li>
             <li><a title="proj11" href="#cursive"><img alt="" src="images/project-logos/freesound.png" /><br />Cursive</a></li>
             <li><a title="proj12" href="#bright"><img alt="" src="images/project-logos/freesound.png" /><br />Bright Eyes</a></li>
             <li><a title="proj13" href="#newfound"><img alt="" src="images/project-logos/freesound.png" /><br />New Found Glory</a></li>
             <li><a title="proj14" href="#lightspeed"><img alt="" src="images/project-logos/freesound.png" /><br />Lightspeed Champion</a></li>
             <li><a title="proj15" href="#fireworks"><img alt="" src="images/project-logos/freesound.png" /><br />Fireworks</a></li>
             <li><a title="proj16" href="#modest"><img alt="" src="images/project-logos/freesound.png" /><br />Modest Mouse</a></li>
             <li><a title="proj17" href="#nightmare"><img alt="" src="images/project-logos/freesound.png" /><br />Nightmare of you</a></li>
         </ul>
     </div>
     <div id="showcase-menu">
         <ul class="tabbedMenu">    
             <li class="active"><a href="#intro">intro</a></li>
             <li><a href="#design">design</a></li>
             <li><a href="#print">print</a></li>
          </ul>
     </div>
 </div>

，我的HTML是：

{{1}}

任何帮助将不胜感激！并忽略内容，因为它仅用于测试目的......

Answer 1

带上这些代码。但是一种解决方案是在你显示的每个li元素上添加一个增加的延迟：

var tabMenu = $('div#showcase-content > ul')
$('li', tabMenu).hide();

$('ul.tabbedMenu a').click(function() {
  var delay = 300;
  $(this.hash + ' li').each(function(i, e) {
    $(e).delay(delay).show("drop");
    delay += 600;
  });
}).filter(':first').click();

这是一个jsfiddle演示此

Jquery - 在不同时间出现的图像

1 个答案: