jQuery reversing my array of elements (or so it appears)

My goal:

Find a DIV, slideUp all of it's child divs, then after all of them are up, show one of those child divs via slideDown.

Snippet of jQuery:

$('.toggleTriggersWrapper .toggleTrigger')
    .click(function(){
        var $togglePanesWrapper = $(this).closest('.toggleTriggersWrapper').next('.togglePanesWrapper').eq(0);
        var IDtoShow = '#' + this.className.match(/toggle\-.+?\b/);
        if($(IDtoShow).is(":hidden")) {
            $togglePanesWrapper.children('.togglePane').slideUp('slow', function(){
                                    console.log($(this));
                if($(this).is(":last-child")){
                    /* if last-child, then we've closed them all, and can now show the new one */
                    $togglePanesWrapper.children(IDtoShow).slideDown('slow');
                };
            });
        };
    })  

The problem:

What I think should happen is that each time I click one of my '.toggleTrigger' elements, it finds the children of my $togglePanesWrapper and then, in order, does a slideUp for each and, then upon the last child being slid up, will slideDown one of my elements.

So, as such, the console.log line should output each of the child elements in order. But it doesn't. Depending on which .toggleTrigger I click on, my console.log is writing out the elements in a different order.

I know this is not a lot to go on, but based on the above, is there a reason this might be happening?

Is there a way to force a re-sort of a jQuery object to match the object order in the DOM?

Per request, here's the HTML I'm referencing:

<div class="toggleTrigg开发者_如何学GoersWrapper">
    <h2>Header</h2>
    <input type="radio" name="radiogroup" value="x" class="toggle-pane1 toggleTrigger" id="relationship-x" />        
    <input type="radio" name="radiogroup" value="y" class="toggleTrigger toggle-pane2" id="relationship-y" />        
    <input type="radio" name="radiogroup" value="z" class="toggleTrigger toggle-pane2" id="relationship-z" />                
</div>   
<div class="togglePanesWrapper">
    <div class="togglePane" id="toggle-pane1">
    hi!
    </div>
    <div class="togglePane" id="toggle-pane2">
    yo!                                 
    </div>
</div>

The reason its in different order is because you are doing a timed animation with slideUp. If the element in the list is already hidden then jquery skips the timed animation and just jumps to the callback function which does the console.log();