Question

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

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

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

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

这是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只能部分工作;关闭动画的菜单工作正常，但列表项不会根据需要淡出。

我已经在这方面工作了一段时间，似乎无法达到预期的效果。任何有关如何按预期工作的想法都将非常感激。

Answer 1

我修改了你的代码：

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

这是 DEMO

在jQuery中链接动画

1 个答案: