.show 和 .animate 同时进行？答案

【问题标题】：.show and .animate at the same time?.show 和 .animate 同时进行？
【发布时间】：2013-08-04 15:11:54
【问题描述】：

我有一个导航，你可以在这里看到：http://hutchcreative.co.uk/rod/。如果您单击菜单图标然后联系，您可以看到图标变为 X。我想在此添加动画，而不是使用 .hide() 和 .show()。但是，每当我添加 .animate 时，它似乎并不适用。这是否意味着我不能用 .animate 替换 .show()？我必须以某种方式将两者结合起来吗？

我在下面发布了我的 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"
        });
    }
});

我试图实现的外观是，当您单击联系人时，菜单图标向上滑动，X 从底部向上滑动，因此看起来基本上是在将其推开。

【问题讨论】：

看看这个关于隐藏和动画的问题stackoverflow.com/questions/17931101/…
我认为我的代码与此非常相似，但我不确定为什么它不起作用。我已经用我试图在 .show() 上使用的动画对其进行了更新
我想如果你想让人们帮你调试这堵代码墙，你至少可以做一个 jsFiddle

标签： javascript jquery navigation jquery-animate nav

【解决方案1】：

您希望单击事件同时触发关闭按钮和菜单按钮的动画。类似this。

CSS：

body{
    background-color:black;
    margin:0px;
    padding:0px;
}

#header{
    text-align:right;
    background-color:#ffffff;
    margin:0px;
    padding:5px;
    height:60px;
}

.pink{
    background-color:#ffaaaa !important;   
}

#menu, #buttons{
    display:block;
    margin:0;
}
#menu{
    width:100%;
}
#menu ul{
    margin:0 60px 0 0;
    padding:0 5px 0 0;
    line-height:60px;
}

#menu li, #buttons li{
    display:inline-block;
    margin:0;
    padding:0;
}

#menu{
    float:left;
}

#buttons li
{
    position:absolute;
    right:5px;
}

#buttons a{
    display:inline-block;
    background-color:black;
    color:white;
    width:60px;
    height:60px;
    line-height:60px;
    text-align:center;
}

#closeButton{
    background-color:blue !important;
}

#contactInfo{
    background-color:green;
    height:100px;
    line-height:100px;
    padding:40px;

}

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：

<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>

【讨论】：