Question

我有带有项目列表的侧栏菜单，当它打开时显示带有淡入淡出效果的菜单列表。我的问题是，每当我按照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>

Answer 1

最初隐藏所有项目，而不是使用.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();

如何重复fadeItem功能？

1 个答案: