Анимационный свиток 100% (по горизонтали)?

Question

На моей странице (apolloedge.com/beta/port.html) у меня есть две кнопки: одна, которую я хочу прокрутить влево onclick, и тот, который я хочу прокрутить вправо onclick, соответственно. Элемент контейнера имеет идентификатор #header2. Детский элемент имеет класс .showc. Этот элемент (.showc) имеет ширину 100%. Как я могу сделать это так, чтобы кнопки прокручивали 100% (анимированные) onclick с помощью JavaScript и/или jQuery? Спасибо за помощь!

Answer 1

Я закончил использовать библиотеку под названием Cycle2. http://jquery.malsup.com/cycle2/

Answer 2

Вы можете использовать CSS3 transition свойство для анимации контейнеров изображений следующим образом:

.showc { 
 
    display: inline-block; 
 
    height: 100%; 
 
    position: relative; 
 
    width: 100%; 
 
    transition: all 0.6s ease-in-out; 
 
}

Тогда левая или правая Направленный onclick Обработчик изменить значение первого .showcmargin-left.