Javascript 如何重复fadeItem功能？_Javascript

Javascript 如何重复fadeItem功能？

javascript

Javascript 如何重复fadeItem功能？,javascript,Javascript,我有一个带有项目列表的侧栏菜单，当它打开时，会显示带有淡入效果的菜单列表。我的问题是，我如何在每次单击“开启器”时重复效果，就像fadein第一次工作一样这是我的效果代码 <body> <div id="st-container" class="st-container"> <div id="main" > <div class="st-pusher"> <!--

我有一个带有项目列表的侧栏菜单，当它打开时，会显示带有淡入效果的菜单列表。我的问题是，我如何在每次单击“开启器”时重复效果，就像fadein第一次工作一样

这是我的效果代码

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









图书馆
函数fadeItem（）{
$（'ul li:hidden:first'）.stop（）.hide（）.delay（50.fadeIn（）；
$（“.st menu ul li”）.addClass（“动画”）；
}
$（'.opner'）。单击（fadeItem）；
$（'li'）.hide（）；

首先在单击时隐藏所有项目，然后使用循环并应用延迟和淡入效果

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

你能告诉我怎么做吗？我正在学习JavaScription，你应该能够用我提供的示例替换你的代码，它会起作用。你需要发布HTML，并更清楚地说明你试图为我完成的任务，以帮助你。啊，我现在明白你想要什么了。请看新的答案。所以基本上效果在我第一次点击菜单图标时起作用，但当我关闭并再次打开它时，我没有再次显示fadeitem效果