вопросов горизонтальной прокрутки с Jquery/CSS

Question

Я пытаюсь создать довольно простой эффект горизонтальной прокрутки с помощью Jquery одушевленного() на уль/Li, как вы можете видеть здесь ...

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

I есть несколько проблем, которые я действительно застрял, хотя ...

1) Когда вы нажимаете «идти влево», он работает (почти) отлично - элементы выглядят так, как будто они прыгают вправо, и поскольку они они отбрасываются со страницы вправо, они исчезают за текстом «идти вправо» - проблема в том, что исключение из этого правила является окончательной кнопкой, отбрасываемой (в этом случае se "button 1") - Я понятия не имею, почему, но он движется перед текстом «идти вправо», когда он спрыгивает с экрана, и даже (если вы идете медленно) слегка меняет формат (текст «Jump 1» перескакивает на вторую линию).

2) Когда вы нажимаете «идти вправо», это работает еще хуже - элементы не исчезают за текстом «идти влево», они просто перепрыгивают через него и скрывают текст. Это не проблема, г-индекс, но кажется, что этот код ...

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

(который работает хорошо для «пойти налево», просто не может быть изменен на «- = 200px» для " go right "). Опять же, у меня нет никаких теорий относительно того, почему это происходит!

3) Более общий вопрос, чем проблема, но я не уверен, что лучший способ ограничить эффект прокрутки, чтобы вы не могли прокручивать бесконечно далеко (пропуская точку, когда все элементы все еще отображаются на экране). Любые общие мысли о хорошем подходе к реализации этого будут действительно оценены - спасибо!

Answer 1

Дать overflow:hidden; по номеру .tagUlContainer, чтобы он работал нормально.

и применить следующий CSS, чтобы сделать переход собственно:

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

Updated CodePen