2

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

4

1 回答 1

0

我注意到当 div 向后滑动时，内容仍然可见，直到它到达左侧并隐藏。在 css 中，您可以添加隐藏在每个容器 div 中的溢出。我认为您也可以在 js 中执行此操作，方法是在幻灯片完成后显示内容。

#aboutSlide{
  ...
  overflow: hidden;
}
#menuSlide{
  ...
  overflow: hidden;
}
#mediaSlide{
  ...
  overflow: hidden;
}
#mediaSlide{
  ...
  overflow: hidden;
}
于 2012-06-19T07:04:22.287 回答