緩慢地移動一個jQuery滑塊

我有一個滑塊，當我到達某個div時我想移動它。當它這樣做時，我想讓滑塊在執行交互時向下移動。緩慢地移動一個jQuery滑塊

這就是例子，是呼叫$("#secrets-slider").slider("value", $("#secrets-slider").slider("option", "min"));確實移動滑塊，但它確實是非常迅速，而且它不會做滑塊應該做哪些問題（移動DIV）。

我需要在它之後打電話$("#magic").css('top', ui.value + 'px');，還是有另一種方式？有沒有一種簡單的方法可以以不同的速度慢慢做到這一點？

爲了所有人的利益。我找到工作的解決方案似乎是...

http://jsfiddle.net/7gk2C/3/

來源

2013-02-07 Glenn

可以設置animate選項

$("#secrets-slider").slider({ 
    orientation: "vertical", 
    min: 0, 
    max: 200, 
    value: 10, 
    animate: "slow", 
    slide: function(event, ui) { 
     $("#magic").css('top', ui.value + 'px'); 
    } 
});

對於div不動，請參閱slide(event, ui)

滑動過程中每次滑動鼠標時觸發。

所以，看起來這個事件不會在以編程方式設置滑塊時觸發。

來源

2013-02-08 00:03:38

這確實解決了50％。它現在緩慢移動。 http://jsfiddle.net/7gk2C/2/但是，我怎樣才能讓它移動div呢？或者我應該只是手動匹配動畫？ – Glenn

的確......看到更新http://jsfiddle.net/7gk2C/3/的工作。這似乎達到了我想要的。不知道這是否是正確的方法。 – Glenn

@Splatter看起來很完美。 –

你需要看看$.animate()

這將允許您以動畫滑塊到你想要的位置，你可以設置一個時間長度以毫秒爲單位。

此外，我認爲觸發器沒有移動div的原因是您沒有與滑塊對象內的滑動控件進行交互。

來源

2013-02-07 23:57:31 hammus

您正在用.slider()調用重新初始化滑塊，這就是爲什麼事件沒有被觸發（技術上它沒有被移動）。

更新：

下面是一個類似的問題的答案在這裏SO（jQuery-ui slider animation when setting value programmatically），there's also a fiddle但這是相關代碼：

$("#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); 
});

來源

2013-02-07 23:59:49 Oerd

緩慢地移動一個jQuery滑塊

回答

相關問題