Question

我正在使用Jquery UI Slider Widget创建一个水平滚动网站。通过左右按钮（悬停/单击滚动）和ui滑动条进行导航。

一切正常，但是当我通过单击滑块导航时无法实现平滑滚动。目前它只是跳转到新的ui.value位置。

我在这里设置了一个jsFiddle：http://jsfiddle.net/stellar/HXgwa/9/以下是我遇到的问题：

margin=Math.round(ui.value / 100 * (p - c));

if (slideDrag === false){
    scrollContent.animate({"margin-left" : margin+"px" }, 300);
}

奇怪的是，如果我将变量'margin'更改为一个确切的数字，那么转换会动画，但是当动态生成边距时，我似乎无法达到相同的效果。

任何帮助都会很棒，因为我几个小时都在苦苦挣扎。

P.S。我对javascript和jquery比较新，所以我希望我的代码符合标准 - 欢迎任何反馈：）

Answer 1

如果你发表评论

scrollContent.animate({"margin-left" : margin+"px" }, 300);

你会注意到，当点击滑动条时，scrollContent仍会移动到新位置。这意味着之后调用animate将不会执行任何操作，因为margin-left已经在代码的其他位置发生了更改。因此，您需要在更改margin-left之前检查是否发生了拖动。

这里可以找到一个粗略的例子（在两个地方寻找//编辑）， http://jsfiddle.net/HXgwa/13/ 我没有检查你的代码，只是在代码更改margin-left之前添加了与拖动相关的条件。