2

これまでのところ、ページが開いたときにいくつかのアニメーションが実行され、いくつかの写真とテキストがスライドして表示されます。ページの上部にリンク先のないリンクがありますが、スタイリングの目的ですべてのリンクを作成しました。 Hover、Visited など。リンクにはクラスがあり、すべてのリンクには「nav」クラスがあり、それぞれに「about」、「contact」などの相対クラスがあります。

ページが開いたときにインデックス ページのコンテンツが下にスライドし、「nav」クラスがクリックされたときに上にスライドして戻る (ビューから外れる) ようにすることができました。ただし、「nav」クラスをクリックすると、ページのコンテンツがスライドして表示されなくなり、クリックされたリンク (「about」または「contact」リンク) に応じて、新しいコンテンツがスライドして表示されるようにします。

        $  (".about") .click(function() {
                $ (".aboutimage") .animate ( {
                marginTop : '-300px'
                }, 300) ;   
        });

この新しい jQuery を "nav" (関数) の最後に追加すると、新しいページ コンテンツ ("about" または "contact") を下にスライドさせることができません。私はある種の if ステートメントを考えていますが、これについてどうすればよいかわかりません。

私はまだ学校に通っており、いくつかのコースワーク用のウェブサイトを作成しています。私が目指している効果は、ページが 1 つしかないという事実です。私はjQueryに非常に慣れていないので、おそらくこれを巡る最長のルートをたどっていますが、ねえ。どんな助けでも大歓迎です。

$ (document).ready(function() { 
    $ (".imgtop") .ready(function() {
        $ (".imgtop") .animate ( {
        marginTop : '0px'
        }, 500) ;   
    });
    $ (".imgright") .ready(function() {
        $ (".imgright") .delay(200) .animate ( {
        marginLeft : '0px'
        }, 500) ;   
    });
    $ (".imgbot") .ready(function() {
        $ (".imgbot") .delay(400) .animate ( {
        marginTop : '0px'
        }, 500) ;   
    });
    $ (".texttop") .ready(function() {
        $ (".texttop") .animate ( {
        marginTop : '-20px'
        }, 500) ;   
    });
    $ (".texttop2") .ready(function() {
        $ (".texttop2") .delay(200) .animate ( {
        marginTop : '-20px'
        }, 500) ;   
    });
    $ (".texttop3") .ready(function() {
        $ (".texttop3") .delay(400) .animate ( {
        marginTop : '-20px'
        }, 500) ;   
    });


    $  (".nav") .click(function() {
        $ (".imgtop") .animate ( {
        marginTop : '-300px'
        }, 300) ;   

        $ (".imgright") .animate ( {
        marginLeft : '-550px'
        }, 300) ;   

        $ (".imgbot") .animate ( {
        marginTop : '-300px'
        }, 300) ;   

        $ (".texttop") .delay(200) .animate ( {
        marginTop : '-170px'
        }, 300) ;   

        $ (".texttop2") .delay(100) .animate ( {
        marginTop : '-170px'
        }, 300) ;   

        $ (".texttop3") .animate ( {
        marginTop : '-170px'
        }, 300) ;   

    });

    $  (".about") .click(function() {
        $ (".aboutimage") .animate ( {
        marginTop : '-300px'
        }, 300) ;   
            });
});
4

1 に答える 1

0

を取り外します$(".imgtop") .ready(function() {

.ready()ハンドラーは、ドキュメントで呼び出された場合にのみ有効です..

各オブジェクトに対して .ready(function() を実行してから、試してください..

コードは次のようになります

$(document).ready(function() {
    $(".imgtop").animate({
        marginTop: '0px'
    }, 500);
    $(".imgright").delay(200).animate({
        marginLeft: '0px'
    }, 500);
    $(".imgbot").ready(function() {
        $(".imgbot").delay(400).animate({
            marginTop: '0px'
        }, 500);
    });
    $(".texttop").animate({
        marginTop: '-20px'
    }, 500);
    $(".texttop2").delay(200).animate({
        marginTop: '-20px'
    }, 500);
    $(".texttop3").delay(400).animate({
        marginTop: '-20px'
    }, 500);

    // Your Click events here
});​
于 2012-10-02T15:40:10.410 に答える