如何重複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函數？

回答

相關問題