Question

So i made sort of a grid-layout in javascript, but it isn’t working like it should yet. I have set it up so that it changes the left margin of an elemenent to make it “slide” to the left/right. However, for some reason it refuses to slide to the last slide. No idea why, can’t seem to find the bug!

Here’s a copy of the whole page:

http://jsbin.com/obivap/3/edit#preview

Click on one of the other “pages” to slide to the next slide.

Any ideas?

Answer 1

You’re animating with margins and floats. So once you push the leftmost box out of its container with a margin, the boxes to its right (which until now have moved with it, because of the float) will stop moving. At -600px the box leaves the container entirely, so the next boxes are now up against the container’s border. You’re not animating their margins, so they won’t leave their container.

If you try and solve this by animating their margins, it will get messy. I haven’t gone over your code thoroughly, but if the boxes are already position:relative, so you might as well style all of their left amounts. This means two simple changes in the code: remove every :first selector (since you want to animate them all), and change all marginLeft to just left.

http://jsbin.com/obivap/6/edit