Question

我正在尝试使用jQuery构建一个滚动条。

滚动条中的项目为display:inline-block，并且在任何给定时间x和y平面中都可以显示多个项目。

任何人都可以帮助我的卷轴吗？

这是我现在所拥有的jsfiddle。动画滑动不起作用。我试图让所有内容在包装器外滑动，同时下一页项目滑入。

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

现在从CSS中删除position: relative;，您将看到动画不再出现，如此分支所示：http://cdpn.io/LcakK

希望有所帮助。

带有多个可见项的jquery滚动条

1 个答案: