walking through divs sequentially

walking through divs sequentially

Hi all
im new to js and jQuery and got the following problem.
HTML (when DOM is ready):

<ul>
<li>
<div id="conatiner">
<div id="myID"></div>
<div id="imgContainer" style="visibility:hidden"></div>
<div id="info">
<div id="info1">Text</div>
<div id="info2">Text</div>
</div>
</div>
</li>
....
....
....
</ul>


What i want to do:
I want to walk through the <li> and load an img in each "imgContainer".
The Path to the image is the id-value of the FIRST div in "conatiner".
When image is loaded: fadeIn image/ slide down "info" and go to next <li> to load the Image.

Is that possible?

Thank you very much.

I was thinking of something like that:


function loadNext(){
if($('#imgContainer:first').is(':hidden')){
path = parent -> first -> id
img = new Image();
img.onload -> imageContaier.append(image)
info.fadeIn('slow');
loadNext();
}
}
loadNext();