2

私はあなたがここで見ることができるナビゲーションを持っています: http://hutchcreative.co.uk/rod/ . メニュー アイコンをクリックしてから連絡すると、アイコンが X に変わるのがわかります。.hide() と .show() を使用する代わりに、これにアニメーションを追加したいと思います。ただし、.animate を追加すると、適用されないようです。これは、.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"
        });
    }
});

達成しようとしている外観は、連絡先をクリックすると、メニューアイコンが上にスライドし、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 に答える