1

3つのセクションを持つ単純なJqueryUIアコーディオンがあります。最初は3つのセクションすべてが折りたたまれています。セクションヘッダーをクリックすると、セクションの内容が表示（スライド）するはずです。特別なことは、セクションコンテンツのdivが互いに完全に重なるように配置されていることです。見栄えを良くするために、次のセクションを表示するアニメーションが始まる前に、現在開いているセクションが完全に切り替わるようにします。

これは私が今セクションを切り替えるために作ったものです：

      $(function () {
         $("#accordion").accordion({

             create: function (event, ui) {
                 ui.oldPanel.slideToggle("slow");

             },
             collapsible: true,
             active:false

         });
     });

あなたはそれがどのように見えるかを見ることができます：

http://jsfiddle.net/kqMAR/

トグルと表示アニメーションが同時に開始するようです。しかし、私が欲しいのは、次のスライドを開始する前に完全に切り替えることです。

4

2 に答える 2

2 
   $(function () {
         $("#accordion").accordion({
             animate:{duration:5000},
             collapsible: true,
             active:false
         });
     });

上記の関数を使用して、実際に何が起こっているかを理解します。古いセクションが閉じ始めるとすぐに新しいセクションが開き始めます。そのため、アニメーションが不完全であるように見えます。完全なアニメーションを作成するには、ボタンを上下に配置すると、適切なアニメーションが表示されます。水平方向の配置が必要な場合は、見た目もかっこいいフェード効果を使用できます。

于 2013-02-01T14:33:17.667 に答える
2

新しい答え：

これを試して

http://jsfiddle.net/6QJJp/1/

これはあなたが正確に必要なものです

要件に応じて修正する必要がありCSSます。

于 2013-02-03T07:27:41.670 に答える