jQuery用户界面滑块 - 处理和滚动内容不同步的动画

Question

我有麻烦得到为我的目的定制的jQuery用户界面滑块。

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

继我的默认滑块设置（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

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

为了使滑块移动，您将不得不模拟用户输入（例如：触发滑块上的单击），或者使用增量值设置来伪造它。

不幸的是，似乎滑块滑块栏区域做了一些时髦的东西，我没有能够触发点击，你可以尝试伪造一个点击并拖动滑块吗？

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

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

对不起，jsFiddle