问如何重复fadeItem函数？
EN

Stack Overflow用户

提问于 2014-02-20 13:35:57

回答 1查看 56关注 0票数 0

我有侧边栏菜单的项目列表，当它打开它显示的菜单列表与淡入淡出效果。我的问题是，我怎么才能在每次点击"opener“时重复这个效果，而且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>

javascript

回答 1

Stack Overflow用户

发布于 2014-02-20 13:44:30

最初，在单击时隐藏所有项目，然后使用.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();

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21899066

复制

相似问题

问如何重复fadeItem函数？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何重复fadeItem函数？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何重复fadeItem函数？
EN