2

我有一个导航，你可以在这里看到：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 从底部向上滑动，因此看起来它基本上是在将其推开。

4

1 回答 1

0

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

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>
于 2013-08-12T20:01:41.583 回答