jQuery Forum

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

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

Hi Guys
I'm trying to loop through images contained in a li tag.
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>
<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>
and a cut down version of the jQuery is this
$("ul.list li a").bind("mouseenter", function () {
var current = 0;
var max_img = ($(this).children().size())-1;
for(current=0;current<=max_img;current++)
{

$(this).children("img").eq(current).fadeIn(fSpeed)
console.log(current);


} //end of for-loop
});
the list acts as a carousel and zooms the thumbnail on mouseenter, which
is then supposed to start fading in the other images contained in the li
tag.
Everything is working perfectly except for lopping through the images.
The loop works, but it just fades in all the images in the li, rather
then waiting for the fade to finish, then moving onto the next image.
I've been at this for a day now, and need to get this working today.
If anyone can help me with this, please do.
Thanks,
Liam Potter
Liam Potter wrote:
> 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

Right, figured out a way to do this without needing setTimeout or a
function...not perfect, but works
var current = 0;
var max_img = ($(this).children().size()-1);

for(current=0;current<=max_img;current++)
{

$(this).children("img").eq(current).animate({opacity:
1.0},(fSpeed*current), function () { $(this).fadeIn(fSpeed)})

} //end of for-loop
Liam Potter wrote:
> Hi Guys
>
> I'm trying to loop through images contained in a li tag.
>
> 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>
>
> <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>
>
> and a cut down version of the jQuery is this
>
> $("ul.list li a").bind("mouseenter", function () {
>
> var current = 0;
> var max_img = ($(this).children().size())-1;
> for(current=0;current<=max_img;current++)
> {
> $(this).children("img").eq(current).fadeIn(fSpeed)
> console.log(current);
> } //end of for-loop
>
>
> });
>
> the list acts as a carousel and zooms the thumbnail on mouseenter,
> which is then supposed to start fading in the other images contained
> in the li tag.
>
> Everything is working perfectly except for lopping through the images.
>
> The loop works, but it just fades in all the images in the li, rather
> then waiting for the fade to finish, then moving onto the next image.
>
> I've been at this for a day now, and need to get this working today.
> If anyone can help me with this, please do.
>
> Thanks,
> Liam Potter
>
>
> Liam Potter wrote:
>> 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