Jquery DIVs在動畫中不能正確滑動

Question

我在這個網站上工作，我想當用戶點擊一個導航項時，div向右滑動並顯示該部分的內容，並且當用戶點擊下一個導航項目當前div會滑回左側，下一個div會滑出右側。我在這裏有這樣的工作：http://fire4hirecatering.com/workingsite/

但是，如果您在點擊每個導航項目一次後再注意到一個頁面，它會在動畫發生之前顯示該div的內容。

我是新來的JQuery，所以我敢肯定這是不是粗糙，但在這裏它是：

function navAbout() { 
if($('#main_content').hasClass("redLeft")) { 
    //Current Div Content Slideout 
    $('.selected').animate({ 
     width: '0px' 
     }, 1200, 'swing').hide(1200); 
    $('#aboutSlide').delay(1200).show().animate({ 
     width: '550px' 
     }, 1200, 'swing'); 
    $('#aboutContent').delay(2400).fadeIn(600); 
     $("#aboutSlide").addClass("selected").not("#aboutSlide").removeClass("selected"); 

    /*Below three lines were the only way to get the class "selected" removed, the code above wasn't working*/ 
    $('#menuSlide').removeClass("selected"); 
    $('#mediaSlide').removeClass("selected"); 
    $('#contactSlide').removeClass("selected"); 
    $('html').css("background-image", "url(img/bg_about.jpg)") 
} 

else { 
    //animate the redBG to the left when user clicks nav 
    $('#main_contentBG').animate({ 
     left: '40px' 
     }, 1200, 'swing'); 
    $('#main_content').addClass('redLeft'); 
    //About Div Content Slideout 
    $('#aboutSlide').delay(1200).show().animate({ 
     width: '550px' 
     }, 1200, 'swing'); 
    $('#aboutSlide').addClass('selected'); 
    $('#aboutContent').delay(2100).fadeIn(600); 
    //change background image 
    $('html').css("background-image", "url(img/bg_about.jpg)") 
} 
} 

你可以看到在上面的鏈接的整個網站源。 JQuery位於scripts.js文件中。

Answer 1

我注意到，當div滑回內容仍然可見，直到它到達左側並隱藏。在CSS中，你可以添加隱藏在每個容器div中的溢出。我認爲你也可以通過在幻燈片完成後顯示內容來在js中做到這一點。

#aboutSlide{ 
    ... 
    overflow: hidden; 
} 
#menuSlide{ 
    ... 
    overflow: hidden; 
} 
#mediaSlide{ 
    ... 
    overflow: hidden; 
} 
#mediaSlide{ 
    ... 
    overflow: hidden; 
}