1

我有一个滑块，当我到达某个 div 时我想移动它。当它发生时，我希望在执行预期的交互时让滑块向下移动。

http://jsfiddle.net/7gk2C/

这是一个例子，问题是调用$("#secrets-slider").slider("value", $("#secrets-slider").slider("option", "min") );确实移动了滑块，但它立即移动了，它没有做滑块应该做的事情（移动 div）。

我需要打电话给$( "#magic" ).css('top', ui.value + 'px');它，还是有其他方法？有没有一种简单的方法可以以变速缓慢地做到这一点？

为了大家的利益。我发现可行的解决方案似乎是......

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

4

3 回答 3

1

您正在使用调用重新初始化滑块.slider()，这就是未触发事件的原因（从技术上讲，它没有被移动）。

更新：

这是关于 SO（以编程方式设置值时的 jQuery-ui 滑块动画）的类似问题的答案，还有一个小提琴，但这是相关代码：

$("#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-07T23:59:49.357 回答
1

您可以设置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-08T00:03:38.563 回答
0

你需要看看$.animate()

这将允许您将滑块设置为您希望的位置，并且您可以设置以毫秒为单位的时间长度。

另外，我认为触发器没有移动 div 的原因是您没有与滑块对象中的滑动控件进行交互。

于 2013-02-07T23:57:31.380 回答