1

我正在尝试创建一个 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 语句只在鼠标退出时触发（la脚！）我不知道为什么！任何提示将非常感谢。

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

提前致谢！

4

2 回答 2

1

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

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

我也不确定是否有必要滑动事件（一个由绑定设置，一个在初始化中设置。我会将其更改为如下所示。

$(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. 我认为您不必同时做这两个：设置“幻灯片”选项并绑定幻灯片事件处理程序。我相信这会将两个事件处理程序注册到同一个幻灯片事件（您可以尝试 console.log 在两个函数中查看行为）。所以你只需要选择一个。
  2. 如果你想在滑动时改变不透明度，fadeTo() 效果可能是不必要的（因为延迟）。你可以改变css不透明度。
  3. 因为不透明度值介于 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); 
      },              
   });      
});​
于 2012-07-19T18:47:55.660 回答