兄弟がここjqueryuiスライド上

Question

を隠していない機能です。

$('.popoutlink').on('click', function() { 
    var box = $('#' + $(this).data('box')); 
    box.siblings().hide(); 
    box.toggle("slide", { direction: "left" }, 500); 
    box.siblings().hide(); 
}); 

私は場合、私は、画面上の2つのslideoutsが残ってる理由を把握しようとの真ん中にだから2つのsiblings.hide文があります2つのボタンをすばやく連続してクリックします。

HTMLは次のとおりです。私は2つのボタンをクリックすると

<div class="col-md-2"> 
    <div class="popoutlink" data-box="p1">1</div> 
    <div class="popoutlink" data-box="p2">2</div> 
    <div class="popoutlink" data-box="p3">3</div> 
    <div class="popoutlink" data-box="p4">4</div> 
    <div class="popoutlink" data-box="p5">5</div> 
</div> 

<div class="col-md-10 bb" style="height: 400px;"> 
    <div class="popout" id="p1"><h1>panel 1</h1></div> 
    <div class="popout" id="p2"> 
     <h1>panel 2</h1> 
    </div> 

迅速その後、2つのウィンドウが画面上に残っています。選択したdivが表示される前に兄弟を非表示にしたいと思います。私はpromise.done()を使用してみましたが

：効果なしに

box.siblings().hide(200).promise().done(function(){ 
    box.toggle("slide", { direction: "left" }, 500); 
}); 

。コールバックとしてhideにbox.toggleを追加：

box.siblings().hide(200, function(){ 
    box.toggle("slide", { direction: "left" }, 500); 
}); 

は非常に面白いが、有用ではありませんでした。

ボタンをクリックしても選択したdivを表示する前に、兄弟姉妹を確実に去らせるにはどうすればよいですか？

あなたsee it hereはただの番号のボックスをクリックしてすぐに

おかげ

Answer 1

私はあなたの質問を理解していれば、これは役立つはず：

$(function() { 
    $('.popoutlink').on('click', function() { 
    var box = $('#' + $(this).data('box')); 
    $(".popout").hide(); 
    //box.siblings().hide(); 
    box.toggle("slide", { 
     direction: "left" 
    }, 500); 
    //box.siblings().hide(); 
    }); 
}); 

https://jsfiddle.net/Twisty/3mbh5p0r/

jQueryのUIを

「リンク」のいずれかがクリックされると、それらはすべて非表示になり、次にクリックされたユーザーのみがトグルされます。

更新

---

.css("display", "none")対.hide()の少しより多くのテストは、CSSを変更するとより高速な方法であることを明らかにしました。このページでは、それがどのようにの話ですが、私はそれが速くはないことがわかりました。

一致する要素は、アニメーションなしですぐに非表示になります。 これは、displayプロパティの値がjQueryの データキャッシュに保存され、後で表示を初期値に戻すことができる点を除いて、.css（ "display"、 "none"）を呼び出すのとほぼ同じです。 エレメントにインラインの表示値があり、表示されていない場合は がインラインで表示されます。

そして：

なお。hide（）はすぐに起動され、持続時間も0の持続時間も指定されていない場合は、アニメーション をオーバーライドします。

私はそれを悪化させるコールバックを使用しようとしました。非表示のアニメーションが完了したときにコールバックを起動する必要がありますが、hide操作をアニメートする要素が追加されています。速度が0であっても、速度は遅かった。

は、だから私はこの助言：

$(function() { 
    $('.popoutlink').on('click', function() { 
    $(".popout").css("display", "none"); 
    $('#' + $(this).data('box')).show("fast"); 
    }); 
});