Hi all - I really hope someone can help as this is driving me bonkers !
I have a jpg that is 500px high and 50px wide. It consists of 10 50px x 50px squares each containing a number from 1 to 10 (1 at top of image and 10 at bottom). (The jpg is here : http://i39.tinypic.com/mmq4x5.jpg
I then have a 50x50 container div on a page with overflow set to hidden. Inside this I have a 500 high x 50 wide div that contains an img tag that is set to the "image strip" mentioned above.
Whenever the visitor clicks on the div, I am scrolling the inner div up by 50 pixels using jquery animate (taking 50px off the css top for the inner div). This gives the effect of a smooth scrolling counter.
When they get to 10 I alter the contents of the inner div by adding the image strip again so there are two images stacked on top of each other. Then on the next "scroll" I remove one of the images. This, basically, allows the counter to smoothly scroll around to 1 again after it has hit 10 and then carry on scrolling up to 10. I have to do it this way because it needs to be a seamless counter that loops around smoothly without any jumping.
It works a treat - Here is a jsFiddle for it : http://jsfiddle.net/ChrisJones/eLBk4/1/
So far so good.... HOWEVER (and here is where I need HELP) :
I now need to create exactly the same thing but in the other direction. IE: I need it to smoothly scroll DOWN from 10 to 1 and then back to 10 with the animation going down rather than up. I can, of course, get that bit working easily but the bit I can't get working is trying to add the 2nd image (when we reach 1) so that it appears to be a seamless scroll back to 1 again...
Any ideas or help MUCH appreciated