Jquery DIV 在动画中没有正确滑动答案

【问题标题】：Jquery DIVs Not Sliding Correctly in AnimationJquery DIV 在动画中没有正确滑动
【发布时间】：2012-06-21 04:28:36
【问题描述】：

我正在这个网站上工作，我希望当用户单击导航项时，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 文件中。

【问题讨论】：

标签： jquery css html jquery-animate

【解决方案1】：

我注意到当 div 向后滑动时，内容仍然可见，直到它到达左侧并隐藏。在 css 中，您可以添加隐藏在每个容器 div 中的溢出。我想你也可以在 js 中做到这一点，在幻灯片完成后显示内容。

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

【讨论】：