jQuery UI Slider - handle 动画和滚动内容不同步

Question

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

加载时 slider 及其内容应自动动画到某个位置。理想情况下，只要用户不将鼠标悬停在滚动内容或 slider 上，它就应该向右移动，然后停止，然后以循环方式返回(作为循环)。

按照我的默认 slider 设置 ( 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});

滚动内容的动画效果很好，但 handle 只是跳转到新位置。

即使我单击 slider 轨道本身，滚动内容和 slider handle 的动画也不同步。

有人有解决办法吗？

Answer 1

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

为了使 slider 移动，您必须模拟用户输入(例如:触发 slider 上的单击)，或者使用增量值设置来伪造它。

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

因此替代方案是重复设置 slider 的值，但看起来很糟糕。

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

抱歉，jsFiddle