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;
}

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

1 个答案: