horizontal scroll issues with jquery/css

Question

I'm trying to create a pretty simple horizontal scroll effect using jquery animate() on a ul/li as you can see here...

http://codepen.io/d3wannabe/pen/YwwvJb

I have a few problems I'm really stuck on though...

1) When you click "go left", it works (almost) perfectly - the items appear as if they're jumping to the right and as they're being pushed off the page to the right, they disappear behind the "go right" text - the problem is that the exception to this rule is the final button being pushed off (in this case "button 1") - I have no idea why, but it moves in front of the "go right" text as it's jumping off screen, and even (if you go slowly) changes format slightly (the text "Button 1" jumps onto a second line).

2) When you click "go right", it works even worse - the elements don't disappear behind the "go left" text, they just jump over it and obscure the text. This isn't a z-index problem, but seems like this code...

$('#tagUl').animate({
            marginLeft: "+=200px"
          }, "fast");

(which works nicely for "go left", can't simply be changed to "-=200px" for the "go right" effect). Again I have no theories as to why this is happening!

3) More of a general question than an issue, but I'm not sure the best way to limit the scroll effect so you can't scroll infinitely far (way past the point that any elements are still showing on screen). Any general thoughts on a good approach to implementing that would be really appreciated - thanks!

Answer 1

Give overflow:hidden; to .tagUlContainer to make it working proper.

And apply following css to make transition proper:

#tagUl{
  transition:1s all;
  -webkit-transition:1s all;
}

Updated CodePen