2

私はこのサイトで作業しています。ユーザーがナビゲーションアイテムをクリックすると、divが右にスライドしてそのセクションのコンテンツが表示され、ユーザーが次のナビゲーションアイテムをクリックすると、現在のdivがスライドして戻ります。左に移動すると、次のdivが右にスライドします。私はここでこの種の仕事をしています：http：//fire4hirecatering.com/workingsite/

ただし、各ナビゲーションアイテムを1回クリックしてからページに戻ると、アニメーションが実行される前にその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 に答える