troubleshooting Question

Using jQuery to scroll and reposition images inside a overflow:hidden DIV

Avatar of Brad Bansner
Brad Bansner asked on
JavaScript
14 Comments1 Solution493 ViewsLast Modified:
On this test page:
http://www.partnersdesign.net/lieverhymanpotter 

I've got a series of 2000px wide images with position:absolute, spaced out at 2000px intervals so they are all lined up left-to-right (but only the left-most image is visible).

In the attached script, every three seconds I animate anything with class=slide 2000px to the left, which slides the whole series to the left.

Then what I am trying to do is reposition the left-most image that just slid off the screen, 12000px to the right, so it put back at the end of the line again.

I think I have close to having this work, but there are some obvious problems. And the positioning is different when you view this in different browsers, which I don't quite understand.

I'm wondering if something about the way I'm doing my callback is incorrect.

Anyway, would appreciate another set of eyes on this. Thank you!

var curImg=1;
var maxImg=6;
var intervalID=setInterval(homeAnimation,3000);

function homeAnimation(){
	console.log('curImg='+curImg);
	console.log('position='+$('#slide'+curImg).position().left);

	$('.slide').animate({left:'-=2000px'}, function(){
		$('#slide'+curImg).animate({right:'+=12000px'});
	});

	if (curImg===maxImg){curImg=1;} else {curImg++;}
};
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 14 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 14 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros