jquery scroller с несколькими видимыми элементами

Question

Я пытаюсь создать скроллер с помощью jQuery.

Элементы в скроллере: display:inline-block и может быть несколько элементов, видимых в плоскостях x и y в любое время.

Может ли кто-нибудь помочь с моим скроллером?

Вот jsfiddle с тем, что у меня есть. Анимированное скольжение не работает. Я пытаюсь сделать все содержимое скользить вместе за пределами оболочки, а на следующей странице элементов задвинуть.

http://jsfiddle.net/GR9ZR/

if (~~ (counter/totalVisible) == currentPage) { 
    item.show(); 
    item.animate({ 
     "left": -(item.position().left) 
    }); 
} else { 
    item.animate({ 
     "left": -(item.position().left) 
    }); 
    item.hide(); 
} 

Answer 1

Если вы хотите анимировать положение, в вашем CSS вы должны дайте элемент, который вы пытаетесь оживить, свойство position: relative;.

Рассмотрим простой пример, в котором я хочу анимировать блок для перемещения вправо, когда я нажимаю на страницу документа.

Codepen эскиз: http://cdpn.io/vdCth

HTML

<div class='item'></div> 

CSS

.item { 
    background: #ccc; 
    display: inline-block; 
    height: 50px; 
    position: relative; 
    width: 50px; 
} 

JQuery

$('html').on('click', function(){ 
    $('.item').animate({ 
    left: "+=50" 
    }, 200, function(){ 
    }); 
}); 

Теперь удалите position: relative; из вашего CSS, и вы увидите, анимация больше не происходит, как показано в этой вилке: http://cdpn.io/LcakK

Надежда, что помогает.