jQuery show a number of list items, fade them out then show some more

Question

Hi,

I've got an ordered list of thumbnail images. I'm trying to figure out how to display say - 9 of these, then have them fade out and display the following 9, etc etc. using jQuery.

There will be a lot of images, so I'll need the function to keep on truckin...

I'd be very grateful for any help

Answer 1

$a = $temp = $("img");
for(var i=0; i<$a.length; i++) {
      $temp = $a.hide(); 
      $temp.slice(i * 9, 9).fadeIn();
      setTimeout('',1000);
}

may be this one will work

Answer 2

Two pieces of code for you:

var show = 9;
var current = show - 1;
var length;

var gallery = $('#gallery');

var galleryItems = gallery.children('li');
length = galleryItems.length;

setInterval(function(){
    current = (current+1)%60;

    galleryItems.eq(current).slideDown();
    galleryItems.eq(current - show).slideUp();
}, 3000);

This would shift the whole list upwards one item at a time. See: http://jsfiddle.net/VL646/1/

---

var show = 9;
var current = 0;
var length;

var gallery = $('#gallery');

var galleryItems = gallery.children('li');
length = galleryItems.length;

setInterval(function(){
    for(var i = current; i < (current+show); i++){
        galleryItems.eq(i).fadeOut(300, function(){
            var idx = (galleryItems.index(this) + show) % length;
            galleryItems.eq(idx).fadeIn(300);
        });
    }

    current += show;
    if(current > length) current = 0;
}, 4000);

And this would fade in and fade out groups of items together. See: http://jsfiddle.net/DtFwH/

The main thing to keep in mind here is the setInterval() function, which keeps running a function over and over again, and the .eq(n) function, which gets the n^th element of the current jQuery object.

Answer 3

@Yi - a HUGE thanks for this!!

here's the code I've used

var show = 15;
var current = 0;
var gallery = $('ul#img-list');
var galleryItems = gallery.children('li');
var length = galleryItems.length;
gallery.children('li:gt(14)', this).hide();

setInterval(function(){
for(var i = current; i < (current+show); i++){
    galleryItems.eq(i).fadeOut(600, function(){
    var idx = (galleryItems.index(this) + show) % length;
    galleryItems.eq(idx).fadeIn(900);
  });
}
current += show;
     if(current > length) current = 0;
}, 5000);

Which works a treat!! I wonder - if it's not too much to ask! - if you might be able to enlighten me with how I could pause the effect when the user mouses-over an image?

Massive thanks again!