Javascript .同时显示和制作动画？

我有一个导航，你可以在这里看到：。如果单击菜单图标，然后与联系人联系，您可以看到图标更改为X。我想在此添加动画，而不是使用.hide（）和.show（）。然而，每当我添加。动画它似乎不适用。这是否意味着我不能将.show（）替换为.animate？我是否必须以某种方式组合2

我已经在下面发布了我的jquery：

$('#menuIcon').toggle(function(){
   $('#navigationWrapper ul').show();
   $("#navigationWrapper").addClass('activenav');
 },
 function(){
   $('#navigationWrapper ul').hide();
    $("#navigationWrapper").removeClass('activenav whiteSection');
});


$('#navigationWrapper #menu-item-59').click(function(){
    if($("#navigationWrapper").hasClass('whiteSection')){
        $('#contactWrapper').slideUp("slow");
        $("#navigationWrapper").removeClass('whiteSection').addClass('activenav');
        $('#menuIcon').animate({
        opacity: "show"
        }, {
        duration: "slow",
        easing: "easein"
        });
        $('#closeIcon').hide();
    }
    else{
        $('#contactWrapper').slideDown("slow");
        $("#navigationWrapper, #navBlog").addClass('whiteSection');
        $('#menuIcon').hide();
        $('#closeIcon').animate({
        opacity: "show"
        }, {
        duration: "slow",
        easing: "easein"
        });
    }
});

$("#closeIcon").click(function () {
    $('#contactWrapper').slideUp("slow");
    $('#menuIcon').animate({
    opacity: "show"
    }, {
    duration: "slow",
    easing: "easein"
    });
    $('#closeIcon').hide();
    $("#navigationWrapper, #navBlog ").removeClass('whiteSection').addClass('activenav');
});


$('#navBlog #menu-item-59').click(function(){
    if($("#navBlog").hasClass('whiteSection')){
        $('#contactWrapper').slideUp("slow");
        $("#navBlog").removeClass('whiteSection').addClass('activenav');
        $('#menuIcon').animate({
        opacity: "show"
        }, {
        duration: "slow",
        easing: "easein"
        });
        $('#closeIcon').hide();
    }
    else{
        $('#contactWrapper').slideDown("slow");
        $("#navBlog").addClass('whiteSection');
        $('#menuIcon').hide();
        $('#closeIcon').animate({
        opacity: "show"
        }, {
        duration: "slow",
        easing: "easein"
        });
    }
});

---

我试图达到的效果是，当你点击contact时，菜单图标向上滑动，X从底部向上滑动，因此看起来它基本上是在把它推开。

你希望你的点击事件同时触发关闭按钮和菜单按钮的动画。差不多

CSS:

JavaScript:

$("#menuButton").click(function(){
    $("#menu").toggle("slide"
                      , {direction: "right"}
                      , 1000
                      , function(){
                          $("#header").toggleClass("pink", 1000); 
                      });
});

$("#contact").click(function(){
    $("#menuButton").toggle("slide", {direction: "down"}, 1000);
    $("#closeButton").toggle("slide", {direction: "up"}, 1000);
    $("#contactInfo").toggle("slide", {direction: "up"}, 1000);
})

$("#closeButton").click(function(){
    $("#menuButton").toggle("slide", {direction: "down"}, 1000);
    $("#closeButton").toggle("slide", {direction: "up"}, 1000);
    $("#contactInfo").toggle("slide", {direction: "up"}, 1000);
})

HTML:

这里有一些联系信息。

看看这个关于隐藏和动画的问题，我认为我的代码与此非常相似，但我不确定为什么它不起作用。我已经用我试图在.show（）上使用的动画对它进行了更新。我认为，如果您希望人们帮助您调试这堵代码墙，那么您至少可以做的是组装一个JSFIDLE

$("#menuButton").click(function(){
    $("#menu").toggle("slide"
                      , {direction: "right"}
                      , 1000
                      , function(){
                          $("#header").toggleClass("pink", 1000); 
                      });
});

$("#contact").click(function(){
    $("#menuButton").toggle("slide", {direction: "down"}, 1000);
    $("#closeButton").toggle("slide", {direction: "up"}, 1000);
    $("#contactInfo").toggle("slide", {direction: "up"}, 1000);
})

$("#closeButton").click(function(){
    $("#menuButton").toggle("slide", {direction: "down"}, 1000);
    $("#closeButton").toggle("slide", {direction: "up"}, 1000);
    $("#contactInfo").toggle("slide", {direction: "up"}, 1000);
})

<div id="header">
    <div id="menu" style="display:none;">
        <ul>
            <li><a id="stuff">stuff</a></li>
            <li><a id="moreStuff">more stuff</a></li>
            <li><a id="contact" href="#">contact us</a></li>
        </ul>
    </div>

    <ul id="buttons">
        <li><a id="menuButton" href="#">Menu</a></li>
        <li><a id="closeButton" href="#" style="display:none;">Close</a></li>
    </ul>
</div>
<div id="contactInfo" style="display:none;">Some Contact information goes here.</div>