Question

Test Case

>> JSFIDDLE <<

The problem

I’ve been playing around with 100% width and height sections and navigating between them. It all works quite smooth – I thought. But, when a user clicks ‘Base’ he is redirected to the first section. That’s good, but the problem arises when a user then reaches the green slide (the fourth one). When on this section a user clicks the next arrow (to the left) the animation is not correct anymore (whereas on the first run it is correct!)

What should happen (and what happens on first run):

• Green (fourth section) slides to the right (right: -$(window).width())
• White (fifth section) slides to the right as well (right : 0)

What happens after a user has already returned to base before

• Green stays put (does not move at all)
• White slides to the right (right : 0) as it should

I have no idea why Green does nothing at all! Maybe you guys can spot the problem?

Also, if you have any tips for my code (things that can be much more logical) please put them in the comments!

Answer 1

On the first run, #green‘s left and right‘s css value is not set (aka auto)

After returning to ‘base,’ you’ll see that #green now has right:0 and left:0