CODEWITHSUNDEEP
javascriptjqueryloopsfadeout
user1469270
user1469270

Reputation:

Loop through divs with jQuery

I'm trying to get these divs to fadeout out when the arrow is clicked (like a very simple slideshow). I can make them fade out, one by one, like thus:

$(document).ready(function(){
    $('li').click(function(){
        $(this).fadeOut();
    });
});

JSFIDDLE

However, this won't let me

Is there a jQuery method can loop through each <li> and fadeOut. If it is the last li, start the sequence again?

Upvotes: 0

Views: 335

Answers (1)

omma2289
omma2289

Reputation: 54659

Is this what you need? http://jsfiddle.net/x3buT/39/

Here I fade out the first slide, then move it to the end of the line and fade in the next

$(document).ready(function(){
    $('.slide:not(:first)').hide();
    //If you only need to change with the arrow, remove .slide from next line
    $('.slide,.arrow').click(function(){
        $('.slide').first().fadeOut(function(){
            $(this).next().fadeIn();
            $(this).appendTo('.inner');
        });
        return false;
    });
});

Upvotes: 3

Related Questions