jQuery fadeOut 其他 div li（被点击的除外）

Question

我有一小段 jQuery 代码（在一些 SOmembers 的帮助下），但它只是错过了我的最后一块拼图。我将尝试解释它是如何工作的以及它最终应该做什么。

所以前两行很简单，这隐藏了所有具有类名 .toggle_hide 的元素

$(document).ready(function () {
        $('.toggle_hide').hide();

这行代码使得 div #background-absolute_content 内的 li 内的 span 元素是可点击的，因此我可以在该 span 标签上使用函数。

    $("#background_absolute_content li span").css('cursor', 'pointer').click(function(){

在这里向我解释有点困难，但我会尝试。我真的不知道这对我的代码有什么作用，我认为它是一个选择器？

var $this = $(this);

当点击 span 元素时，这部分会淡出一个 .toggle_hide 类的元素

                $('.toggle_hide').fadeOut(200, function(){ 

fadeOut 完成后，fadeIn 开始执行以显示 div。它会选择“this”中的 div，我认为它是跨度所在的 li。

                $this.next("div").fadeIn(200);
            });
    });
});

所以我想我已经解决了很多问题，但问题是由于淡出，需要显示的 div 在出现之前会快速闪烁。因此，我需要一种方法来选择所有 li 元素，但其中包含当前 span 代码的元素除外，这样代码就不会影响（使其闪烁）内部的 div。但是当然需要显示...

我尝试在 jsFiddle 上模拟问题 http://jsfiddle.net/YpeeR/7/

为了更好看的完整代码。

$(document).ready(function () {
        $('.toggle_hide').hide();

    $("#background_absolute_content li span").css('cursor', 'pointer').click(function(){
        var $this = $(this);
                $('.toggle_hide').fadeOut(200, function(){ 
                $this.next("div").fadeIn(200);
            });
    });
});

Answer 1

请问这个锻炼：http://jsfiddle.net/amantur/EjAcZ/6/

我变了：

$('.toggle_hide').fadeOut(200, function(){ 
     $this.next("div").fadeIn(200);
});

到

$('.toggle_hide').fadeOut(200);

$this.next("div").fadeIn(200);

var $this = $(this);
var $nxtDiv = $this.next("div");
$('.toggle_hide').not($nxtDiv).fadeOut(200);
$nxtDiv.toggle('slow');

这将首先隐藏所有 div （当前显示一个，当前一个已隐藏） 除了当前一个，然后 show 切换点击的那个。

编辑：- 我也更新了小提琴。