Jquery UI Slider Widget中的动画内容滚动答案

【问题标题】：Animate content scroll in Jquery UI Slider WidgetJquery UI Slider Widget中的动画内容滚动
【发布时间】：2013-10-04 07:37:41
【问题描述】：

我正在使用 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' 更改为确切的数字，则过渡动画，但当边距动态生成时，我似乎无法达到相同的效果。

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

附：我对 javascript 和 jquery 比较陌生，所以我希望我的代码符合标准 - 欢迎任何反馈:)

【问题讨论】：

【解决方案1】：

如果你注释掉

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

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

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

【讨论】：