javascript - 具有多个可见项目的 jquery 滚动条

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 中删除 ，您将看到动画不再出现，如此 fork 所示：http ://cdpn.io/LcakK

希望有帮助。