0

ユーザーがメインメニューをクリックすると、Webページが設定されたページにフェードするように管理しましたが、ユーザーが入力したばかりのページのメニューの項目をクリックすると、ユーザーがページにフェードバックしませんアクセスしたいですか？

多くのコードがあるので、サイトへのリンクを次に示します。

http://jsfiddle.net/NxAzu/

There is a main.css file, a fade.js file and the index.html file. I also use animate.css.

リンクを実際に機能させる方法について、ここで同様の質問をしました。

すべての助けに感謝します、ありがとう。

4

1 に答える 1

0

あなたがやろうとしていることには、あなたが持っているほとんどのjQuery + animation CSSは本当に必要ではないようです(私が概念を正しく把握している場合)。

現在持っている jQuery コードと animate.css を削除し、これをプラグインしてみてください。

$('a[href^="#"]').on('click', function(){

    // Cache
    var _this = $(this);

    // Get the section name that you want to show
    var section_to_show = $(_this.prop('hash'));

    // Hide all other sections except the one you want to show
    // but make sure it's not currently being animated
    _this.closest('section').not(':animated').animate({
        'margin-top': '-100px', 
        opacity: 0
    }, 750, function() {

        // Hide the current element so it can be
        // faded in next time it's called
        $(this).hide();

        // Fade in the section that you wanted 
        section_to_show.css({ 
            opacity: 1,
            'margin-top': '0'
        }).fadeIn(750);

    });

});

各リンクのハッシュと同じ名前のすべてのセクションがあるため、クリックしたリンクからハッシュ値を呼び出し、現在のセクションをフェードアウト (少しスライドアップ + フェードアウト アニメーション) してからフェードすることができます。クリックごとに新しい。

最後に、アニメーションが乱れているように見えるため、セクション.animated .fadeInDownからクラスを削除します。#start

<section id="start" class="start">

PS すべてのセクションで同じメニューのマークアップを作成しないように、すべてのファンシー セクション アニメーションの外側にある独自のコンテナーにナビゲーションを移動することをお勧めします。ただの提案です。

ここにフィドルの例があります: http://jsfiddle.net/aPPYT/3/

于 2013-11-04T23:02:15.250 に答える