[jQuery] Sequence of fadeOut and fadeInt
Hi,
I've got the following code for a simple nested menu:
<code>
<div id="portalmenu">
<div id="me_1" class="menuentry">1st order</div>
<div id="me_2" class="menuentry"
onClick="portalmenu_openentry(2)">1st order</div>
<div class="menuentry invisible" rel="children_2">2nd order</div>
<div class="menuentry invisible" rel="children_2">2nd order</div>
<div id="me_3" class="menuentry">1st order</div>
</div>
<script type="text/javascript">
function portalmenu_openentry(id) {
// Make all menuentries invisible
$("#portalmenu > div.menuentry:visible").fadeOut('slow').
// Show only the child menuentries
find("#portalmenu > div.menuentry[@rel=children_"+id
+"]").fadeIn('slow');
}
</script>
</code>
(there's also a css class called "invisible" which speaks for itself)
When the user clicks on the 2. 1st order menuentry, all 1st order
entries should fade out and AFTERWARDS all 2nd order entries should
fade in..
The selectors work all properly (and I think are also efficient,
please correct me if I'm wrong). But the fade-out-and-then-fade-in
sequence doesn't run serially but parallelly, which causes the wrong
effect. The callback of fadeOut is applied to each of the found
elements, which would execute fadeIn several times mistakenly, so it's
useless as far as I understand it.
I can't image this problem hadn't been adressed before anywhere...
even so I can't find a solution yet.
Is there anyone with an idea?
Thx
-Alex