jQuery 在显示新元素之前隐藏所有可见元素

Question

所以我有以下代码：

function toggleTarget($element, cb) {
    $('.panel').each(function() {
       if($(this) != $element) {
           $(this).fadeOut('slow');
       }
    });
    $element.fadeToggle('slow', cb);
}

所以基本上你可以 click 在多个按钮上显示不同的 panels 所以我想做的是遍历所有可能的 panels 如果有显示隐藏他们然后显示与 clicked

按钮相关的 panel

P.S 对 JS 很陌生，所以请耐心等待并给出完整的答案。

Answer 1

使 $element 的 fadeToggle 成为 $('.panel') 的 fadeOut 函数的回调函数。

function toggleTarget($element, cb) {
    $.when(
        $('.panel').not($element).fadeOut('slow');
    ).done(function() {
        $element.fadeToggle('slow', cb);
    });
}

Answer 2

这只是一个演示。你可以这样试试，

HTML :

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

jQuery :

$("#container div").on("click", function(){
    var selectedDiv = $(this);
    $(this).parent().children("div").fadeOut();
    $(this).fadeIn();
});

jsFiddle

jQuery 在显示新元素之前隐藏所有可见元素

jQuery hiding all visible elements before showing new one

javascript

jquery

toggle

show-hide