Question

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

这是一个例子，问题是调用$("#secrets-slider").slider("value", $("#secrets-slider").slider("option", "min") );确实移动了滑块，但它立即执行，并且它不会执行滑块应该执行的操作（移动div）。

我需要在它之后拨打$( "#magic" ).css('top', ui.value + 'px');，还是有另一种方式？是否有一种简单的方法可以慢速变速？

为了所有人的利益。我发现工作的解决方案似乎是......

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

Answer 1

您正在使用.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);
});

Answer 2

您可以设置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)

在幻灯片播放期间每次鼠标移动时触发。

因此，当以编程方式设置滑块时，似乎不会触发此事件。

Answer 3

您需要查看$.animate()

这将允许您将滑块设置为所需位置的动画，并可以设置以毫秒为单位的时间长度。

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

慢慢移动jquery滑块

3 个答案: