Grow your CSS skills. Land your dream job.

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

  • # June 8, 2013 at 5:54 pm

    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?

    # June 8, 2013 at 7:52 pm

    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);
    }

    # June 8, 2013 at 9:21 pm

    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.

    # June 9, 2013 at 1:40 am

    @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

    # June 9, 2013 at 7:29 am

    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 :)

    # June 9, 2013 at 11:01 am

    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.

    # June 9, 2013 at 11:07 am

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

    # June 9, 2013 at 2:35 pm

    @CrocoDillon

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

    Let’s get that worked on lol…

    # June 9, 2013 at 5:28 pm

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".