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

【问题标题】：jQuery hiding all visible elements before showing new onejQuery在显示新元素之前隐藏所有可见元素
【发布时间】：2015-09-07 06:35:16
【问题描述】：

所以我有以下代码：

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

所以基本上你可以在多个按钮上使用click，这些按钮将显示不同的panels，所以我要做的是循环所有可能的panels，如果有显示隐藏它们，然后显示panel与 clicked 的按钮有关

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

【问题讨论】：

添加完整的代码，HTML也是。 jsfiddle会更好

标签： javascript jquery toggle show-hide

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

现在它只是闪烁着闪烁。