jQuery UI Slider 重置动画答案

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

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

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

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

【问题讨论】：

等等，当你说动画时，这不仅仅是设置值。

标签： jquery user-interface slider jquery-animate

【解决方案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 对象以避免范围问题。之前的答案也不太相似..