jquery scroller with multiple visible items

Question

I'm trying to build a scroller using jQuery.

The items within the scroller are display:inline-block and there can be multiple items visible in the x and y planes at any given time.

Can anyone help with my scroller?

Here is a jsfiddle with what I currently have. The animated sliding isnt working. I'm trying to make all of the contents slide together outside of the wrapper while the next page of items slide in.

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

If you want to animate the position, in your CSS you must give the element you are trying to animate a property of position: relative;.

Consider a simple example, in which I want to animate a block to move right, when I click on the document page.

Codepen sketch: 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(){
  });
});

Now remove the position: relative; from your CSS, and you will see the animation no longer occurs, as demonstrated in this fork: http://cdpn.io/LcakK

Hope that helps.