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

Jquery Slider - get every numeric value of the slider? not only on mouseout?

本文关键字：不仅仅是 mouseout 获取 Slider- Jquery      更新时间：2023-11-22

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

我需要它在滚动滑块时进行更新（而不必停止单击）。

提前感谢！

这并不是说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;  
                  }  
        });

以下是我的评论：

  1. 我认为您不必同时做这两件事：设置"幻灯片"选项和绑定幻灯片事件处理程序。我相信这将为同一幻灯片事件注册两个事件处理程序（您可以尝试在两个函数中使用console.log来查看行为）。所以你只需要选择一个
  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); 
      },              
   });      
});​
相关文章：