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

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 に答える
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 に答える
0

$.animate()を見る必要があります

これにより、スライダーを希望の位置にアニメーション化でき、時間の長さをミリ秒単位で設定できます。

さらに、トリガーがdivを動かしていない理由は、スライダーオブジェクト内のスライドコントロールを操作していないためだと思います。

于 2013-02-07T23:57:31.380 に答える