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

Posted 2023-05-08

【中文标题】jQuery UI Slider - 手柄和滚动内容的动画不同步

【英文标题】：jQuery UI Slider - Animation of handle and scroll content not in sync

【发布时间】：2012-01-02 13:15:37

【问题描述】：

我在为我的目的定制 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);

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

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

有人有解决办法吗？

【参考方案1】：

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

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

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

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

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

advanceSlider(1);

对不起，jsFiddle

【讨论】：

你是对的。看起来很可怕！我可以改用什么 jQuery Ui 工具？还是 jQuery Tools Lib 有更好的方法来处理滑块？