1

jquery スライダーと switch ステートメントを使用して、基本的にテキスト (および画像) をフェードインおよびフェードアウトさせる jquery スライダーを作成しようとしています。コードは次のとおりです。

$(function(){
            $sliderValue="";
            // Slider
            $('#slider').slider({
                orientation: "vertical",
                value : 100,
                min: 0,
                max: 100,
                slide: function(event, ui) {
                            $("#slider_value").val(ui.value);
                            //$("p#time1").fadeTo("slow", 0.90);

                      },
                stop: function(event, ui) {
                    $sliderValue=ui.value;
                      }
            });
            $('#slider').bind('slide', function() {
                var sV = $sliderValue;
                switch (sV) { 
                     case 100: 
                     $("p#time1").fadeTo("fast", 1);
                     break; 
                     case 90: 
                     $("p#time1").fadeTo("fast", 0.60);
                     break; 
                     case 80: 
                     $("p#time1").fadeTo("fast", 0.30);
                     break; 
                     case 75: 
                     $("p#time1").fadeTo("fast", 0.00);
                     break; 
                 }
            });


        });

基本的に、この switch ステートメントはマウス アウト時にのみ起動します (ラメ!)。その理由はわかりません! どんなヒントでも大歓迎です。

スライダーをスクロールするときに更新する必要があります（クリックを停止する必要はありません）。

前もって感謝します！

4

2 に答える 2

1

switch ステートメントが実行されていないのではなく、古いデータで実行されているだけです。

停止イベントで $sliderValue の値のみを設定しているようです。ただし、switch ステートメントで $sliderValue を使用しています。

また、イベントをスライドさせる必要があるかどうかもわかりません (1 つはバインドによって設定され、もう 1 つは初期化で設定されます。このように変更します。

$(function(){  
        $sliderValue="";  
        // Slider  
        $('#slider').slider({  
            orientation: "vertical",  
            value : 100,  
            min: 0,  
            max: 100,  
            slide: function(event, ui) {  
                        $("#slider_value").val(ui.value);  
                        switch (ui.value) {   
                             case 100:   
                             $("p#time1").fadeTo("fast", 1);  
                             break;   
                             case 90:   
                             $("p#time1").fadeTo("fast", 0.60);  
                             break;   
                             case 80:   
                             $("p#time1").fadeTo("fast", 0.30);  
                             break;   
                             case 75:   
                             $("p#time1").fadeTo("fast", 0.00);  
                              break;
                         }  

                  },  
            stop: function(event, ui) {  
                $sliderValue=ui.value;  
                  }  
        });
于 2012-07-19T18:16:02.930 に答える
0

これが私のコメントです：

  1. 「スライド」オプションの設定とスライドイベントハンドラーのバインドの両方を行う必要はないと思います。これにより、2つのイベントハンドラーが同じスライドイベントに登録されると思います（2つの関数でconsole.logを試して、動作を確認できます）。したがって、1つを選択する必要があります。
  2. スライド中に不透明度を変更する場合は、（遅延のために）fadeTo（）効果が不要な場合があります。cssの不透明度を変更するだけです。
  3. 不透明度の値は0〜1であるため、最小/最大/ステップオプションを同じ範囲に設定して、計算を削除することもできます。

コードと例は次のとおりです。http：//jsfiddle.net/fLmKC/

$(document).ready(function () {
   // Slider
   $('#slider').slider({
      orientation: "vertical",
      value : 1,
      min: 0,   
      max: 1,   
      step: 0.01,
      slide: function(event, ui) {
         $("p#time1").css("opacity", ui.value); 
      },              
   });      
});​
于 2012-07-19T18:47:55.660 に答える