.show and .animate at the same time?

.show and .animate at the same time?

本文关键字：same time the at and animate show      更新时间：2023-09-26

我有一个导航，您可以在这里看到：http://hutchcreative.co.uk/rod/.如果你点击菜单图标，然后联系，你可以看到图标变成了X。我想在上面添加一个动画，而不是使用.hide（）和.show（）。但是，无论何时我添加.animate，它似乎都不适用。这是否意味着我不能用.animate替换.show（）？我必须以某种方式组合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"
        });
    }
});

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

您希望您的点击事件同时触发关闭按钮和菜单按钮的动画。像这样的东西。

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>
相关文章：