problem with :eq()?

problem with :eq()?


Hi people...

Hope some of you get interested in my problem enough to help me find a solution.

After a few weeks of reading up on jQuery and Javascript I wanted to apply what I learned to do the following:

Hide then display 3 dot images in sequence. i.e. with a 1500 msec delay between each dot

I start this on the window load event by calling my function showDotSeq() with an index value of 0

The debug alert statements tell me that I the index is being incremented correctly on successive calls to the funciton and going through the functions if block 3 times and finally the else block one time at the end.

But for some reason only the first dot image is displayed.

Here's some snippets of my test code:

HTML

--------

<button id="test-button">

dot test</button>

<div id="dotPositions">

  <img src="dot.jpg" alt="dot image" style="position: absolute; left: 75px; top: 100px;"/>
  <img src="dot.jpg" alt="dot image" style="position: absolute; left: 100px; top: 100px;"/>
  <img src="dot.jpg" alt="dot image" style="position: absolute; left: 125px; top: 100px;"/>
</div>

Javascript/jQuery code
--------------------------------

var index = 0;

function showDotSeq()
{
  if ($('#dotPositions img').get(index) !== undefined) // check whether we've processed all img's or not
  {
    alert(index); // debug



    // show dot image
    $('#dotPositions img:eq(index)').show();

    // increment index and recursively call to show next dot image
    index++;
    window.setTimeout("showDotSeq();", 1500);
  }
  else
  {
    alertString = "index " + index + " is undefined"; // debug
    alert(alertString);
  }
}








//========================================

$(window).load(function()
{
  // hide dots
  $('#dotPositions img').hide();

  // on click event sequentially show dots
  $('#test-button').click(function()
  {
    showDotSeq(index);
  });
});