Ok, so now I know it's just the loop isn't waiting for the fadeIn
animation to complete before moving on.
I'm trying to use a setTimeout, but I can't put this into a function
because when I do $(this) no longer relates to what I need it to.
I tried changing it to this
function doThis() {
var current = 0;
var max_img = $(this).children().size();
for(current=1;current<=max_img;current++)
{
setTimeout(doThis,3000);
$("ul.list li a").children("img").eq(current).fadeIn(fSpeed,
function () { })
} //end of for-loop
}
doThis();
but then it doesn't even run..
This is rather urgent and I'm really strugling here, so if anyone has
any suggestions, please suggest away.
- Liam
Liam Potter wrote:
I've just taken another look and it is actually fading the rest of the
images, all at the same time.
It seems to me the loop is running, but doesn't wait for the first
image to finish fading, would using setTimeout doing anything?
evo wrote:
Hi Guys,
I'm having some trouble looping through images by fading one into the
next.
This is the jQuery
$("ul.list li a").bind("mouseenter", function () {
var a;
var max_img = $(this).children().size();
for(a=0;a<=max_img;a++)
{
$(this).children("img").eq(a).next().fadeIn(3000)
} //end of for-loop
});
and the html is this
<ul class="list">
<li><a href="#">
<img src="assets/images/portfoliostrip/testimg.gif" alt="test"
width="74" height="42"style="display:block;" />
<img src="assets/images/portfoliostrip/testimg1.gif" alt="test"
width="74" height="42" style="display:none;" />
<img src="assets/images/portfoliostrip/testimg2.gif" alt="test"
width="74" height="42 style="display:none;" />
</a></li>
</ul>
These images will be pulled from a database, and I don't know how many
there will be.
Right now, when I hover over the image, it just fades in the last
image in the list.
Can anyone explain why this isn't working and maybe post some code
that will please.
Thanks,
Liam
