Search code examples
javascriptjqueryhtmlimagesequences

How to create sequential image fade?

I am trying to create a sequential image fade in effect which would have to stop at the end of the last array image element. currently I have this function which fades in only one element.

Any suggestions are appreciated, thanks

function x() {
     $('#myImage').fadeIn(600, function() {
         $(this).attr('src', images[0]).css({'display':'none'}).fadeIn(600);
     });
}
Solution

  • Is this what you wanted?

    jsfiddle

    function x(imageIndex)
{
    if(!imageIndex) imageIndex = 0;
    $myImg.fadeIn(600, function(){
        if(imageIndex < images.length) {
            $(this).hide().attr('src', images[imageIndex]);
            x(++imageIndex);
        }
    });
}

x();