0

我正在尝试创建一个菜单，其内容默认隐藏，但可以通过单击给定元素来打开和关闭其可见性。

这本身就很简单，但是当我尝试向函数添加链式动画时，我遇到了困难。

简而言之，这就是我想要完成的事情：

  1. 在文档加载时，隐藏包含菜单项的无序列表。同时，将菜单项的不透明度更改为 0。
  2. 单击菜单切换元素时，首先通过向下滑动菜单（使用 slideToggle）为菜单设置动画，然后淡入菜单项以完全不透明。
  3. 当菜单打开并单击切换元素时，通过将菜单项恢复为零不透明度来淡出菜单项，然后通过向上滑动菜单来动画关闭菜单。

这是HTML：

<p class="menu-toggle"><a href="#">Toggle</a></p>
<ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

CSS：

.menu-toggle {
    width: 100%;
    background: aqua;
    margin: 0;
    padding: 0;
}
.menu {
    width: 100%;
    background: orange;
    margin: 0;
    padding: 0;
    display: none;
}

和javascript：

$(document).ready(function () {

    // set some variables
    var menu_toggle = $('.menu-toggle');
    var menu = $('.menu');
    var menu_li = menu.find('li');

    // hide the menu as soon as the DOM is ready
    menu.hide();

    // change the initial opacity of the menu items
    menu_li.css({
        opacity: 0
    });

    // toggle the menu on clicking the control  
    menu_toggle.click(function () {
        menu.slideToggle(500, function () {
            menu_li.animate({
                opacity: 1
            }, 500);
        });
        return false;
    });

});

最后，这里是 jsfiddle：http: //jsfiddle.net/EYmPA/

使用当前代码，我已经从上面完成了#1。我已经完成了#2，但只是第一次单击切换元素。此后，只有菜单幻灯片似乎起作用。最后，#3 只能部分起作用；菜单关闭动画效果很好，但列表项不会根据需要淡出。

我已经为此工作了一段时间，似乎无法获得预期的效果。任何关于如何按预期工作的想法将不胜感激。

4

1 回答 1

0

我修改了你的代码：

var menuShown = 0;
// toggle the menu on clicking the control  
menu_toggle.click(function () {
    if(menuShown){
        menu.slideUp(500, function(){
            menu_li.animate({opacity: 0}, 500);
            menuShown = 0;
        })
    }else{
        menu.slideDown(500, function(){
            menu_li.animate({ opacity: 1}, 500);
            menuShown = 1;
        });
    }
    return false;
});

这是演示

于 2013-07-31T02:01:13.957 回答