1

私が欲しいのはかなり単純です：

背景のあるコンテナがあります。コンテナー内には、次のようなトリガーと非表示のボックスがあります。

<div id="container">

<span id="box-1">Open 1</span> <span id="box-2">Open 2</span> <span id="box-3">Open 3</span> <span id="box-4">Open 4</span> <span id="box-5">Open 5</span> 

<div class="box box-1">Hi! I'm Box 1</div>
<div class="box box-2">Hi! I'm Box 2</div>
<div class="box box-3">Hi! I'm Box 3</div>
<div class="box box-4">Hi! I'm Box 4</div>
<div class="box box-5">Hi! I'm Box 5</div>

</div>

トリガーがクリックされると、ターゲット ボックスが下にスライドします。ボックスが既に開いている場合は、上にスライドし、新しいターゲット ボックスが下にスライドします。私はこれをサイトの別の部分で作業していますが、jsfiddle で共有するのは少し複雑です。正しく動作しない単純なバージョンは次のとおりです。

jsFiddle: スライドアップとスライドダウンの問題

slideUp が完了する前に、slideDown 関数が開始されているようです。slideDown を slideUp コールバックの外に移動しましたが、同じ反応が得られます。期間と遅延を使用しましたが、それでも同じ問題があります。

- - - 編集 - - -

私の目標は、コンテナーが再び拡張する前に完全に折りたたまれることであることに注意してください。

4

3 に答える 3

8

これは、再度スライドダウンする前に hide() が必要だからです

$('.box').not(boxItem).slideUp(function(){
    $('.box'+boxItem).hide().slideDown();
});

http://jsfiddle.net/dYMx8/

于 2012-12-10T22:47:01.747 に答える
0

アニメーションを停止してみてください:

$('.box').not(boxItem).stop(true, true).slideUp(function(){
    $('.box'+boxItem).slideDown();
});

渡すtrue, trueと、アニメーション キューがクリアされ、アニメーションが「最後までジャンプ」します。

フィドル

http://api.jquery.com/stop/

于 2012-12-10T22:38:58.943 に答える