2

ヘッダーが見えないようにして、ページが読み込まれるとアニメーションが表示されるようにしたいと思います。

現時点では、フェードアウト/フェードインのあるランディング ページからのトランジションがあり、このトランジションが発生する前にヘッダーが所定の位置にアニメーション化されないようにする必要があります。さらに、この遷移は、ランディング ページから移動したときにのみ発生します。

これを行う方法について何か考えはありますか？

これが私のフェードイン/アウトスクリプトです:

$(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(2000);

    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);      
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});
4

1 に答える 1

1

リンクの場所の最後にハッシュタグを追加するのはどうですか? #dashboard か何かのように。そして、ページが読み込まれると、ハッシュタグが存在するかどうかを確認できます。存在する場合は、ボディをアニメーション化し、ボディ フェード インのコールバックでヘッダーにフェードを追加します。

何かのようなもの

$(document).ready(function() {
    if(window.location.hash)
    {
       $('body').hide();
       //move the header to the top
       $('#header').css('top', -50);
       $('body').fadeIn(2000, function(){
           $('#header').animate({ top: '+=50', }, 2000, function() { 
              // Animation complete. 
           });
       });
    }
    else
    {
       $("body").hide();
       $("body").fadeIn(2000);
       $("a.transition").click(function(event){
            event.preventDefault();
            linkLocation = this.href + '#dashboard';
            $("body").fadeOut(1000, redirectPage);      
        });
    }
});
function redirectPage() {
    window.location = linkLocation;
}
于 2012-12-14T21:35:33.987 に答える