I'm designing a one page site with a whole page slider, somewhat like on this site. So, when for instance you click on the right arrow, the current page content slides to the left, and new content slides form the right. I was able to make the current page content slide to the left, but am having problems with sliding the new content from the right.

In code I've got this snippet:

2. $('div#contact').css('right','-941px');
3. 
   
4. $('a#next').click(function() {
5.       $('div#home').stop().animate({
6.             left: '-941px'
7.       }, 300);
8.       $('div#contact').stop().animate({
9.             right: 'auto'
10.       }, 300);
11. });

So, I'm basically changing CSS attributes. Problem is with line 9. That part does not seem to work. The page content is 940px wide and centered, so I've managed the sliding with changing the left and right CSS astributes. If instead of right: 'auto' I put right: '0px', the sliding works, but the content stops on the right windows side, which is as expected, but with the auto value it does not animate.

I went deep here to explain the problem. Anyone got a clue on a workaround to make the animation work?

Thank you