.show和.animate在同一時間？

我有一個導航，你可以在這裏看到：http://hutchcreative.co.uk/rod/。如果您點擊菜單圖標，然後聯繫，您可以看到圖標更改爲X.我想在此添加動畫，而不是使用.hide（）和.show（）。但是，無論何時添加.animate，它似乎都不適用。這是否意味着我不能用.animate替換.show（）？不知怎的，我必須把2合併在一起嗎？.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" 
     }); 
    } 
});

外觀IM試圖實現的是當你點擊聯繫人菜單圖標向上滑動和X從底部向上滑動，所以它看起來是基本上把它推開了。

來源

2013-08-04 probablybest

看看這個問題上隱藏和動畫http://stackoverflow.com/questions/ 17931101/css-animate-fadeout-and-position/ – frenchie

我認爲我的代碼與此非常相似，但我不知道它爲什麼不工作。我更新了動畫即時試圖使用.show（） – probablybest

我想如果你想讓人們來幫助你調試這段代碼，至少你可以做的是把一個jsFiddle – frenchie

您希望您的點擊事件同時觸發關閉按鈕和菜單按鈕的動畫。像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>

來源

2013-08-12 20:01:41 MyItchyChin

.show和.animate在同一時間？

回答

相關問題