jQuery fadeOut other div's li (exept one that's clicked)

I have this small piece of jQuery code (with help from some SOmembers) but it just misses that last piece of the puzzle for me. I'll try to explain how it works and what it should do eventually.

So the first 2 lines are easy, this hides all the elements with an classname .toggle_hide

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

This line of code makes that the span elements that are inside a li that's inside the div #background-absolute_content are clickable so I can 开发者_运维百科have a function on that span tag.

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

Here it gets a little bit harder to explain for me but I'll try. I don't really know what this does for my code, I think it's an selector for something?

var $this = $(this);

When the span element is clicked this part fadeOut an element with the class .toggle_hide

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

And after the fadeOut has been done this fadeIn kicks in so that the div is shown. And it selects the div that is inside "this" which I supose would be the li where the span is in.

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

So I think I got that pretty much sorted out but the problem is that the div's that need be shown make a quick flash before apearing because of the fadeOut. So I need a way to select all the li elements except the one that has the current span code in it so the code won't affect (make it flash) the div that's inside. But ofcourse it needs to be shown...

I tried to simulate the problem on jsFiddle http://jsfiddle.net/YpeeR/7/

Whole code for a better look.

$(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);
            });
    });
});

---

Will this workout: http://jsfiddle.net/amantur/EjAcZ/6/

I have changed:

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

to

$('.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');

This will first hide all divs (currently showing one, current one is already hidden) except current one and then show toggle the clicked one.

EDIT:- I have updated the fiddle also.