1

以下の設定のHTMLドキュメントがあります。

<div class="main-div" style="padding: 5px; border: 1px solid green;">

    <div class="first-div" style="width: 200px; height: 200px; padding: 5px; border: 1px solid purple">
      First Div
      <a href="#" class="control">Control</a>
    </div>
    <div class="second-div hidden" style="width: 200px; height: 200px; padding: 5px; border: 1px solid red;">
      Second Div
      <a href="#" class="control">Control</a>

    </div>

  </div>

hiddenまた、表示設定をなしで呼び出すCSSクラス設定もあります。

私は次のようにjQueryを設定しています：

$('.control').click(function(){

    var master = $(this).parent().parent();
    var first_div = $(master).find(".first-div");
    var second_div = $(master).find(".second-div");

    $(first_div).toggleClass("hidden")
    $(second_div).toggleClass("hidden")

  });

この設定では、divの表示を切り替え、コントロールボタンをクリックして、一方のdivを非表示にし、もう一方のdivを表示します。

ただし、これは各divをフラッシュで非表示にして表示するだけです。divの遷移にアニメーションを追加しようとしています。おそらく、「コントロール」をクリックしたときに1つのスライドを上に、もう1つのスライドを下にスライドさせます。その逆も同様ですが、これを実現できません。

誰かがこれを行う方法について助けてアドバイスを与えることができますか？

応援

Eef

4

2 に答える 2

2

jQuery を使用して要素のクラスを変更し、CSS に依存してそれらを非表示にするのではなく、jQuery Effectsを使用して、要素をビュー内外にフェード/スライド/眩惑させることをお勧めします。

于 2010-03-18T00:06:24.070 に答える
0

あなたが説明しているものはアコーディオンと呼ばれます。jQuery UIを使用する場合は、アコーディオンのサポートが組み込まれています。サイトでアコーディオンのデモをチェックしてください。ライブラリをダウンロードして、その動作を確認できます。自分でやってみたい場合は、このタイプの機能をどのように実装できるかがわかります。

于 2010-03-18T00:13:23.780 に答える