jQuery: Transform slideshow from one DIV to many DIVs

Question

I'm writing some rather basic jQuery code to create a slideshow from a set of images in a DIV. The CSS ensures that all images are stacked on top of each other. The script looks at the active image in the set, then moves the NEXT image's z-index up (via CSS class) and fades it in from 0.0 opacity. Rinse, repeat. It's actually based on some code I found at John Raasch's blog.

I'm trying to tweak the code so that when the opacity fade is complete, it looks to the next slideshow DIV on the page, advances it by one image, and continues down the page until all DIVs have sequentially moved forward one frame. Then, I'd like it to wait some interval, and do it all over again.

I've tried producing the following code, but it's breaking on me, telling me that target.next is not a function...

jQuery

$(document).ready(function(){
 setInterval( "slideSwitch('div:first')", 5000 );
});

function slideSwitch(target) {
 var nextTarget = target.next();
 var active = $(target+' img.active');

 if (active.length == 0)
  active = $(target+' img:last');

 var next = active.next().length ? active.next() : $(target+' img:first');

 active.addClass('last');

 next.css({opacity: 0.0})
  .addClass('active')
  .animate({opacity: 1.0}, 500, function() {
   active.removeClass('active last');
   slideSwitch(nextTarget);
  });
};

Answer 1

your "target" is not a jquery object. you need to do $(target).next()