jquery – Problem with .delay()/.fadeIn() in loop

[martyd777]

I’m attempting to create my own jQuery auto-playing slideshow, and I feel as if I’m really close. There is just one problem I’m facing: I’m trying to put a .delay() and .fadeIn() effect on the slide transitions. However, when I add them in, the slide doesn’t slide. Here is my code:

$(document).ready(function(){
var array = [];
$(‘.thumbnails img’).each(function(){
var path = $(this).attr(‘src’);
array.push(path);
})
var count = array.length;
var i = 0;
function auto() {
while(i $(“#slideshow img”).css({“display”:”none”});
$(“#slideshow img”).attr(‘src’, array);
$(“#slideshow img”).fadeIn();
i++;
}
}
auto();
});

If I remove the delay() and fadeIn() effects, then the slide works, but it slides wayy too fast. How can I add a transition effect without breaking the slideshow?

[pixelgrid]

you can go with the set timeout javascript function and use it to recursively call the auto function every 3 seconds for example

setTimeout(auto,3000);

function auto(){
//code
setTimeout(auto,3000);
}

[CrocoDillon]

Something like this:

$(function() {
var thumbnails = $(‘.thumbnails img’),
slideshow = $(‘#slideshow img’).first(),
next = 0;

function slideNext() {
slideshow.hide().attr(‘src’, thumbnails[next].src).fadeIn();
next = ++next % thumbnails.length;
setTimeout(slideNext, 3000);
}
slideNext();
});

your function `auto` doesn’t make much sense since you’re looping over all the paths in one call.

[martyd777]

@CrocoDillon

You’re right. I sank some more time into my slideshow, and realized my while loop was executing, as you’ve stated, in one call. I switched it to a .each() loop, and that seemed to do the trick. However, I struggled to get it to fade in smoothly. I like what you’ve done here, though I’m still trying to wrap my head around it. I’m new to jQuery, and I’ve never seen some of the code you’ve used. Very minimal, exactly what I was going for, thanks : )

Just to make myself clear, this is the segment of your code that is foreign to me:

thumbnails[next].src

[CrocoDillon]

You can access the Elements (pure JavaScript nodes, not wrapped in a jQuery object) of a jQuery set of elements just like you’d access the keys of an array. `thumbnails[next]` simply returns the Element with index ‘next’. `src` is a property of the image element. It’s equivalent to `thumbnails.eq(next).attr(‘src’)`, but more efficient and clean. If you need more help let me know :)

[martyd777]

Interesting, I believed that you couldn’t access the list of HTML elements unless they’d been captured in an array. jQuery, and the support at css-tricks.com, continues to impress me. Thanks again. I viewed your post about your portfolio design. It seems you took a clean/minimal approach. Well, you did a great job. I like the colors, the architecture of information, and the subtle effects. As you were looking for input, how about creating a hover and active state for your logo? I tend to enjoy the subtle details of web design; the things that aren’t completely necessary, but added as a finishing touch or for user experience. I would assume, most people would be for a hover/active state.

[CrocoDillon]

You’re welcome :) About my own website, I’ve been procrastinating that one a lot, I should finish it… thanks for the feedback! :)

[JohnMotylJr]

@CrocoDillon

About my own website, I’ve been procrastinating that one a lot

Let’s get that worked on lol…

[martyd777]

It’s easiest to procrastinate your own site : ) I’m in the same boat.

[Author]

Posts