jQuery UI Slider 重置动画

Posted

技术标签:

【中文标题】jQuery UI Slider 重置动画【英文标题】:jQuery UI Slider reset animation 【发布时间】:2012-03-18 12:24:05 【问题描述】:

尝试创建一个滑块,如果它没有被一直拖过,它将滑回到开头......这是不起作用的:

$("#slider").slider(
    animate: true,
    change: function(event, ui) 
        if ($(this).slider('value') < 100) 
            $(this).slider('value', 0);
        
       
);

滑块向后移动,但立即没有动画。

【问题讨论】:

等等,当你说动画时,这不仅仅是设置值。 【参考方案1】:

在 jquery ui 1.8.18 中,您将不得不异步调用它:

$("#slider").slider(
   animate: true,
   stop: function(event, ui) 
     if($(this).slider('value') < 100) 
      setTimeout(function()
         $("#slider").slider('value', 0);
      ,1);
    
     
);

【讨论】:

试试这个修改版,用最新版的jquery ui测试过【参考方案2】:

给你:

$("#slider").slider(
    animate: true,
    stop: function(event, ui) 
        if(ui.value < 100) 
            setTimeout(function() 
                $("#slider").slider("value", 0);
            , 100);
        
       
);

这个小提琴也展示了一个例子:http://jsfiddle.net/chrisabrams/2xkvy/1/

【讨论】:

ui.value和$(this).slider('value')有什么区别 在这种情况下,它们是相同的。 jQuery UI 建议尽可能使用 ui 对象以避免范围问题。之前的答案也不太相似..

以上是关于jQuery UI Slider 重置动画的主要内容,如果未能解决你的问题,请参考以下文章

更改 jQuery UI 滑块值选项时动画滑块句柄?

将指针从一个点拖动到另一个点时,jQuery UI Slider 没有给出“滑动”效果

jQuery UI Slider对数刻度

jQuery-ui slider - 如何阻止两个滑块相互控制

jQuery UI Slider范围:保持按钮在范围内[关闭]

jQuery UI Slider(滑块)