asked on

JQuery fade and change order

I have a series of absolute positioned images and the code is supposed to fade out the top image and then move it to the back, it's only running once (well running continuously but I must have something screwed up with the logic as the first image only shows on the initial load.)

	setInterval(function() { 
		$(".cycle").each(function(){
			$("img:last-child",this).fadeOut('slow', function() {
			$("img:last-child",this).insertBefore($("img:first-child",this))
			$("img:last-child",this).show()})
		})}, 3000);

Open in new window

Julian Hansen

Without seeing your markup you could try this

$(function() {
	setInterval(function() { 
		var indx = $('.cycle img:visible').index();
		$('.cycle img:eq(' + (indx++) + ')').fadeOut();
		$('.cycle img:eq(' + (indx%3) + ')').fadeIn();
	}, 3000); 
});

Open in new window

Working sample here

Gary

ASKER

I can't use an index reference, there are multiple elements on the page that this function is working on and they all have differing number of images.

The markup is basically what you have in your sample, just absolute positioned images in a container.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gary

ASKER

Had to change it to this coz something was still going screwy with it and I can't be bothered to look it through, maybe something funny in my code.

  setInterval(function() { 
    $('.cycle').each(function() {
      $('img:last',this).fadeOut(function() {
        $(this).prependTo($(this).parent()).fadeIn();
      });
    });
  }, 3000);

Open in new window

Julian Hansen

Interesting - tried it in all browsers including IE8 in IE7 standards mode - and seems to work - as a matter of interest what was the rest of your code so I can test here.

Thanks for the points though.