jQuery UI Slider - 手柄和滚动内容的动画不同步

Question

我在为我的目的定制 jQuery UI 滑块时遇到了麻烦。

在加载滑块时，它的内容应该会自动动画到某个位置。理想情况下，只要用户不将鼠标悬停在滚动内容或滑块上，它应该动画到最右边，然后停止并返回动画（作为循环）。

按照我的默认滑块设置 (http://jsfiddle.net/mayko/j6WuE/1/)：

var scrollbar = $("#slider").slider({
    animate: 3000,
    min: 0,
    max: $("#timeline_content .items").width(),
    change: handleSlider,
    slide: handleSlider
}); 
function handleSlider(e, ui) {
    $("#timeline_content").stop().animate({scrollLeft: ui.value}, scrollbar.slider("option", "animate"));
}

如果我现在尝试这样设置值：

$('#slider').slider({'value': 1000});

滚动内容的动画效果很好，但手柄只是跳到了那个新位置。

即使我单击滑块轨道本身，滚动内容和滑块句柄的动画也不同步。

有人有解决办法吗？

Answer 1

“动画”选项仅适用于单击滚动条。动画不会像您所做的那样通过手动设置值来触发。

为了使滑块移动，您要么必须模拟用户输入（例如：触发滑块上的点击），要么使用增量值设置来伪造它。

不幸的是，滑块似乎对滑块区域做了一些奇怪的事情，我无法在那里触发点击；您可以尝试假装单击并拖动滑块吗？

所以替代方案是重复设置滑块的值，但看起来很糟糕。

function advanceSlider(next){
    scrollbar.slider('value',next)
        if(next<1050)
            setTimeout(function() { advanceSlider(next+50) },150);
}
advanceSlider(1);

对不起，jsFiddle