Question

我正在尝试创建一个jquery滑块，它基本上使用jquery滑块和switch语句使文本淡入淡出（和图片）。这是代码：

$(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语句只会在鼠标输出时触发（跛脚！）而且我不知道为什么！任何提示将不胜感激。

我需要在滚动滑块时更新（无需停止点击）。

提前致谢！

Answer 1

不是switch语句没有运行，它只是运行旧数据。

看起来你只是在stop事件中设置$ sliderValue的值。但是，您在switch语句中使用$ sliderValue。

我也不确定是否有必要滑动事件（一个由bind设置，另一个在初始化。我会把它改成看起来像这样。

$(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;  
                  }  
        });

Answer 2

以下是我的评论：

我认为您不必同时执行这两项操作：设置“幻灯片”选项并绑定幻灯片事件处理程序。我相信这会将两个事件处理程序注册到同一个幻灯片事件中（您可以在两个函数中尝试使用console.log来查看行为）。所以你只需要选择一个。
如果要在滑动时更改不透明度，则可能不需要fadeTo（）效果（因为延迟）。你可以改变css不透明度。
由于不透明度值介于0和1之间，因此您还可以将min / max / step选项设置为相同的范围并删除一些计算。

以下是代码和示例：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); 
      },              
   });      
});

Jquery Slider - 获取滑块的每个数值？不只是在mouseout上？

2 个答案: