缓慢地移动一个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滑块

回答

相关问题