[jQuery] Problems getting timing of commands to happen correctly
Hi everyone,
I have been trying to use jQuery to create a relatively simple image
rotator. The challenge I ran into with this script is that I want the
new image to fade-in over top of the existing image. After many
different attempts, I was able to get "pretty close" by using the
following (unelegant) code:
i++;
bg++;
if (i == (numImages + 1)) { i = i - numImages; }
if (bg == (numImages +1 )) { bg = bg - numImages; }
bgImg = "url(/images/stories/js_images_home/header_" + bg + ".jpg)";
img = '<img id="gallery" src="/images/stories/js_images_home/
header_' + i + '.jpg"/>';
$
('#header_gallery').css("backgroundImage",bgImg).html(img).find('img:eq(0)').fadeIn(3000).fadeTo(3000,1).fadeOut(4000,runHomePg);
When I run the code, it works partially. From what I can tell, I am
doing something wrong in trying to queue the effects . Right now,
setting the CSS background-image and the fading in & out of the
foreground image happen simultaneously instead of sequentially like I
want them to.
Any help would be greatly appreciated...
Steve