2012-02-29 103 views
1

试图创建将滑回到开始如果没有一路之隔把它拖一个滑块......这里是行不通:jQuery UI的滑块重置动画

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

滑块向后移动,但瞬间没有动画。

+0

等待,当你说动画,不仅仅是设定值。 – 2012-02-29 01:25:14

回答

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); 
    } 
    } 
}); 
+0

谢谢,但仍然没有动画。 – chAd 2012-02-29 00:38:08

+0

试试这个修改后的版本,用最新版本的jquery UI – Tim 2012-02-29 00:55:08

+0

完成了测试!完美的作品!谢谢:) – chAd 2012-02-29 02:36:26

1

在这里你去:

$("#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/

+0

这个也可以,谢谢! – chAd 2012-02-29 02:39:45

+0

ui.value和$(this).slider之间的区别是什么('value') – chAd 2012-02-29 02:42:49

+0

在这种情况下,它们都是相同的。 jQuery UI建议尽可能使用ui对象以避免范围问题。此外,答案之前并不如此相似。 – 2012-02-29 02:58:31