Jquery-图像在不同时间出现

我有一些代码用来制作一个简单的选项卡式Jquery菜单。目前，整个

正在滑入，我希望所选

中的每个

项目滑入，每个项目之间稍有停顿，而不是作为一个项目滑入

jQuery代码是：

$(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();
});

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

$(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();
});

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

---

任何帮助都将不胜感激！忽略内容，因为它只是为了测试目的…

对这段代码持保留态度。但一种解决方案是在显示的每个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();

---

这是一个演示

您的意思是希望#showcase内容项目一个接一个地滑入吗？您希望在页面加载时发生这种情况，还是仅在单击.tabbed菜单项时发生这种情况？