[英]jQuery - How to apply .animate() and .show('slide') at the same time?
[英].show and .animate at the same time?
我有一台導航儀,您可以在這里看到: http : //hutchcreative.co.uk/rod/ 。 如果單擊菜單圖標,然后與您聯系,您將看到圖標變為X。我想在此添加動畫,而不是使用.hide()和.show()。 但是,無論何時添加.animate,它似乎都不適用。 這是否意味着我無法將.show()替換為.animate? 我是否必須以某種方式組合兩個?
我在下面發布了我的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:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.