0

div コンテンツを含むトランジション フェード ページを作成しようとしました。これは私の水平ヘッダー メニューです。

<ul id="navigation" class="select">
    <div id="teste">
            <li><a id="link-home" href="#home">Home</a></li>
    <li><a id="about" href="#about">about</a></li>
    <li><a id="contact" href="#contact">contact</a></li>
    </div>

これはコンテンツの例です

<div id="home">
      <h2>this is home</h2>
</div>
<div id="about">
      <h2>this is about</h2>
</div>
<div id="contact">
      <h2>this is contact</h2>
</div>

リンクをクリックして次のページへのフェード効果を使用するときに、#home がホームページを表示し、他の非表示にする必要があります (これは div の場合です)。最善の方法は何ですか？css3またはjquery? または両方？このスクリプトの作成を手伝ってくれる人はいますか?

4

1 に答える 1

0

あなたの質問を正しく理解できれば、別のページにリンクするのではなく、ナビゲーションを新しいコンテンツにフェード インさせたいと考えています。その場合、CSS3 または jQuery のどちらでも機能しますが、ブラウザーの下位互換性があるため、jQuery をお勧めします。IE 9 より古いものは、CSS3 トランジションを解釈しません。さらに、CSS3 でクリックを検出する良い方法がないため (この質問を参照してください)、最終的にそこで jQuery を使用することになります。コードは次のとおりです。

メニュー：

<ul id="navigation" class="select">
    <div id="test">
        <li><a id="link-home" href="#">Home</a></li>
        <li><a id="link-about" href="#">about</a></li>
        <li><a id="link-contact" href="#">contact</a></li>
    </div>
</ul>

コンテンツ：

<div id="home">
      <h2>This is home.</h2>
</div>
<div id="about">
      <h2>This is about.</h2>
</div>
<div id="contact">
      <h2>This is contact.</h2>
</div>

jQuery:

$(document).ready(function () {
    var animTime = 600;
    $("#about").hide();
    $("#contact").hide();
    $('#link-home').click(function() {
        $("#about").fadeOut(animTime);
        $("#contact").fadeOut(animTime);
        $("#home").delay(animTime).fadeIn(animTime);
    });
    $('#link-about').click(function() {
        $("#home").fadeOut(animTime);
        $("#contact").fadeOut(animTime);
        $("#about").delay(animTime).fadeIn(animTime);
    });
    $('#link-contact').click(function() {
        $("#home").fadeOut(animTime);
        $("#about").fadeOut(animTime);
        $("#contact").delay(animTime).fadeIn(animTime);
    });
});

これは、既に持っているコードで動作するはずです。マークアップの ID が jQuery の ID と一致していることを確認してください。フェードインの時間を調整したい場合は、 の値を変更するだけですanimTime。この数値は、アニメーション時間をミリ秒単位で測定します。animTime他の div がアニメーション化されてから新しい div がアニメーション化されるため、アニメーションにかかる実際の時間は 2 倍になります。

于 2013-11-04T20:35:53.580 に答える