Question

我使用jQuery创建了一个滑块。我的照片滑块上有缩略图和标题。在标题和照片之间的中间位置的图像缩略图下方有一个进度条固定位置。

可以向左或向右拖动滑块。当滑块保持静止时，进度条的宽度为零。当用户将照片向左拖动以进行下一张照片时，进度条的宽度正在大幅增加，直到下一张照片几乎在起点上被替换（进度条的宽度接近100％然后返回再次增加0％。

插图

# Photo
# Progress bar
# Caption

问题

目前进度条位于X宽度。当我将滑块向左拖动时，宽度会增加，但它对我上面提到的内容没有影响。

演示

Answer 1

如果我理解正确，您希望在进度条的不同状态/宽度之间创建平滑过渡。使用css prop transition: <prop-to-be-animated> <duration> <timing-function>应该可以胜任。例如。在你的情况下：

.bar {
  transition: width 1s ease-in-out; 
}