以編程方式設置值時的jQuery-ui滑塊動畫

我正在使用jQuery-ui slider和一些按鈕快速選擇一組值。以編程方式設置值時的jQuery-ui滑塊動畫

當用戶點擊這些按鈕中的一個，所述滑塊通過.slider方法設置爲相應的值：

$("#mySlider").slider("value", myValue);

這工作得很好，但我想看到，滑動動畫。我試着用

$("#mySlider").slider({value:myValue, animate:true})

但預計它不工作，因爲當，以後，用戶點擊滾動條上的動畫時纔會啓用。

我應該使用setTimeout寫一個函數來實現我想要的還是有更高級別的方法來使用jQuery來做到這一點？

來源

2012-05-15 etuardu

請在jsfiddle.net – Dhiraj

後爲我們提供了一個樣本的HTML請。 – j08691

這裏是表示解決方案的jsfiddle：http://jsfiddle.net/exXLV/8/

的伎倆似乎是創建一個滑塊，並設置它的animate選項true，slow等。之後，你應該通過$("#slider").slider('value', 150);

通知設置滑塊的值用.slider('value', 150)語法（「值」功能），並使用.slider({value:myValue, animate:true})語法（「選項」功能）之間的差異。

HTML：

<h1>HTML Slider Test</h1> 

<div id="slider"></div> 

<p>Your slider has a value of <span id="slider-value"></span></p> 

<button type="button">Set to 150</button>

JS：

$("#slider").slider(
{ 
      value:100, 
      min: 0, 
      max: 500, 
      step: 1, 
      animate: "slow", 
      slide: function(event, ui) { 
       $("#slider-value").html(ui.value); 
      } 
} 
); 

$("#slider-value").html( $('#slider').slider('value')); 


$("button").click(function(){ 
    $("#slider").slider('value', 150); 
});

來源

2012-05-15 20:41:48 snies

謝謝，解決方案是將animate設置爲True的滑塊初始化。 – etuardu

使用animate與value方法一起

這樣的事情應該做

var slider = $(".slider").slider({ 
    value: 50, 
    animate: true 
}); 

$('#animate').click(function(){ 
    slider.slider('value', //required value); 
});

DEMO

希望這有助於

來源

2012-05-15 20:42:15 Dhiraj

以編程方式設置值時的jQuery-ui滑塊動畫

回答

相關問題