I am writing jQuery to switch divs which in pseudo code should do the following:
item.click
check to see if the div I want to expand is hidden
if so
slideup all of the divs
when finished...
slide down the one I want to expose
There are several elements that can be clicked (in this particular case, radio buttons).
I can make it all work (thanks to some help from wonderful people here at Overflow).
The only mistake I have is that if you click on an element, and then before the process completes, click on another element, the animations will start to add up and get confused. And I can break the display by quickly clicking between the trigger elements. I tried to fix this by doing "when they clicked, if something comes to life, it stops, and then hides them all in reset things":
$('.toggleTriggersWrapper .toggleTrigger')
.click(function(){
var $togglePanesWrapper = $(this).closest('.toggleTriggersWrapper').next('.togglePanesWrapper').eq(0);
var IDtoShow = '#' + this.className.match(/toggle\-.+?\b/);
var $IDtoShow = $(IDtoShow);
if($togglePanesWrapper.children('.togglePane').is(":animated")) {
$togglePanesWrapper.children('.togglePane').hide().stop();
};
$togglePanesWrapper.children('.togglePane').not(IDtoShow).slideUp('fast', function(){
var wait = setInterval(function() {
if( !$togglePanesWrapper.children('.togglePane').is(":animated") ) {
console.log('if is animated');
clearInterval(wait);
$togglePanesWrapper.children('.togglePane').not(IDtoShow).hide();
$togglePanesWrapper.children(IDtoShow).slideDown('slow');
}
}, 200);
});
})
, , DO , divs "" , . div , , "", , , div , , .
?