1

jQuery UI スライダーを使用しています。スライダー範囲をクリックすると、現在のアニメーション化されたスライダーの値を表示する方法はありますか?

現在、スライダーが「スライド」している間、スライダーの値はアニメーション化されません。animate: true;

例えば：

  • スライダーの開始値: 0。
  • Slider range: 20 をクリックしました。
  • 最終スライダー値: 20。

0->1->2->3->4->5->6 ... ->19->20 ではなく、0 から 20 に変更されました。(変更された値のアニメーション効果)。これは、この Web のスライダーに似ています: Slider Example。誰でもこれを行うことができますか？

4

4 に答える 4

1

animate プロパティをスライダーに追加するだけでよいと思います。例えば：

  $( "#slider-range-max" ).slider({
        range: "max",
        min: 1,
        max: 100,
        value: 1,
        animate: true,
        slide: function( event, ui ) {              
             $('#amount').val(ui.value);                 
         }

});

jquery UI スライダーの例を次に示します。

http://jqueryui.com/demos/slider/#multiple-vertical

于 2012-06-10T21:10:48.917 に答える
1

ウェブページに表示される数値更新を使用して、スライダー ボタンをスライダー バーのさまざまな部分に移動したり、そこから移動したりしたいと考えています。

このjsFiddleはそれを行い、プリセット値がクリックされると Button を自動的にアニメーション化します。

編集:明確な例による最近の要件に従って、既知の値を使用して同じことを達成するより良い方法を次に示します...高価なを使用して計算する必要はありませんJavaScript Math.ceil()。

新しい jsFiddle

ボーナスは、既知のパーセンテージが浮動小数点値として提供されることです。これは、使用方法や、スライダー バーの上部/下部にマーカー/ホットスポットがある場合に違いを生む可能性があります。

于 2012-06-10T12:53:52.707 に答える
1

アニメーションのスライダー値で私の解決策を確認してください。彼のjsFiddleの上に私のソリューションを更新したので、@arttronics の功績が認められました。:)

スライダー バーをクリックして、値がアニメーション化されることを確認してください。:)

于 2012-06-10T15:08:38.650 に答える
0

jQuery UI スライダーについて言及している場合は、次を試してください。

$('div#foo')
    .slider({
        animate: true,
        slide: function(event, ui) {
           $('div#bar').text(ui.value);         
        }
    });

編集

数値の増減にアニメーション効果を表示する必要があったときに、このコードを Web のどこかで見つけました (誰の功績か思い出せません)。

var num_holder = $('#foo');
        $({ someValue: 0 }).animate({
            someValue: 100
        }, {
            duration: 1000,
            easing:'swing',
            step: function() {
                num_holder.text(Math.ceil(this.someValue))
            }
        });

http://jsfiddle.net/cVndp/

これは完全にテストされていませんが、おそらくうまくいくでしょう：

$('div#foo')
    .slider({
        animate: true,
        slide: function(event, ui) {

            $({ someValue: 0 }).animate({
                someValue: ui.value
            }, {
                duration: 1000,
                easing:'swing',
                step: function() {
                    $('div#bar').text(Math.ceil(this.someValue))
                }
            });

        }
    });

おそらく、someValueを 0 から以前の場所の値に変更する必要があります。また、スライダーを引く方向に応じてアニメーションの方向を変更しますが、これは出発点です。

于 2012-06-10T08:53:45.690 に答える