Sequential Animation of Unknown Number of Elements
OK here's my problem-I really want my web page to look slick, so I am currently using the jQuery UI effect fade to show and hide certain divs. When a user clicks on certain links, I want certain divs to hide and other divs to show. The problem is-I want these animations to happen sequentially-not simultaneously. Because they are different elements they aren't added to the same queue and thus happen at different times. I have tried to use the fxqueues plugin, but I can't seem to get that to work with the fold UI (only with the simpler animations). The reason I can't simply use callback functions is because there's no guarantee there is a div open right now. Any ideas?
To be more specific what I have is a list of names that each have information corresponding to them. When a name is clicked on, I want the old person's div to hide THEN the new person's div to show.
My code is below-each name in the list of people is of class selectable and when clicked gets class selected (which is simply a darker background). The queue options you see here are for that plugin, I used to just have empty quotes there. This all works, just not sequentially like I'd like.
$(".selectable").click(function(){
$(".selected").each(function(){
var id = getIdFromString($(this).attr('id'));
$("#routes_"+id).hide("fold",{queue:'global'},800);
$(this).removeClass("selected");
});
var id = getIdFromString($(this).attr('id'));
$(this).addClass('selected');
$("#routes_"+id).show("fold",{queue:"global"},800);
});