如何重复fadeItem函数？

我有侧栏菜单项目列表，当它打开它显示菜单与淡入淡出效果的列表。我的问题是，每次点击“开瓶器”时，我如何才能重复这种效果，而这种方式只是第一次使用淡入淡出效果。如何重复fadeItem函数？

这里是我的效果代码...

 <body> 
    <div id="st-container" class="st-container">   
    <div id="main" > 

     <div class="st-pusher"> 
    <!-- nav menu start --> 
      <nav class="st-menu st-effect-8" id="menu-8"> 

       <ul> 
        <li><a class="icon icon-data" href="profile.html"> <div class="icon-menu"><img src="img/user-demo.png" alt="user-picture"></div> Nathen Scott</a></li> 
        <li><a class="icon icon-data" href="index.html"> <div class="icon-menu"><img src="img/icon-library.png" alt="user-picture"></div> Library</a></li> 
        <li><a class="icon icon-location" href="#"><div class="icon-menu"> <img src="img/icon-bookstore.png" alt="user-picture"></div> Bookstore</a></li> 
        <li><a class="icon icon-study" href="#"><div class="icon-menu"> <img src="img/icon-camera.png" alt="user-picture"> </div>Text Capture</a></li> 
        <li><a class="icon icon-photo" href="#"> <div class="icon-menu"><img src="img/icon-setting.png" alt="user-picture"></div> Setting</a></li> 
       </ul> 

      </nav> 



      <div class="st-content"><!-- this is the wrapper for the content --> 
       <div id="main"><!-- extra div for emulating position:fixed of the menu --> 

        <div id="st-trigger-effects" class="tab_bar_index"> 
         <button data-effect="st-effect-8" class="opner"><img src="img/icon-menu.png" alt="icon"></button> 
         <button class="table_content"><img src="img/icon_setting_small.png" alt="icon"></button> 

         <div id="titlebar"> 
          <img src="img/logo_text.png" alt-"logo"> 
          <span >Library</span> 
         </div> 

        </div> 

       </div> 
      </div> 
     </div> 

    </div><!-- /main --> 
    </div> 

<!-- fade effect for the nav menu --> 

    <script type="text/javascript"> 
       function fadeItem() {  
      $('ul li:hidden:first').stop().hide().delay(50).fadeIn(); 
      $(".st-menu ul li ") .addClass("animate"); 

     } 

     $('.opner').click(fadeItem); 
     $('li').hide(); 

    </script> 


</body>

来源

2014-02-20 user3386640

发布一些代码 –

最初隐藏点击的所有项目，比使用.each遍历和应用的延迟和效果褪色。

function fadeItem() { 
    // hide menu items  
    $('.st-menu ul li')stop().hide();  

    // go through and set each element to fade in 
    $('.st-menu ul li:hidden').each(function (index, elem) { 
     $(elem).delay((index + 1) * 50).fadeIn(); 
    }); 


    $(".st-menu ul li").addClass("animate"); 
} 

$('.opner').click(fadeItem); 
$('li').hide();

来源

2014-02-20 05:44:29 Shannon

你能告诉我怎么？我正在学习javascript – user3386640

你应该能够用我给出的示例代替你的代码，它会起作用。 – Shannon

它没有工作！它显示每个项目打开每个项目 – user3386640

如何重复fadeItem函数？

回答

相关问题