最后是一个有趣的jQuery问题。
这是绝对可以做到的。下面我就来解释一下“如何”。如果你想直接进入演示，click here。
让我们假设你的HTML设置如下：

<div id="slider">
    <div id="bar"></div>
</div>

其中栏是您单击和拖动的实际对象。
现在你需要做的是：

• 获取$('#bar').offset().left
• 使用一些额外的变量SPEED显式指定拖动对象时#bar的位置

举例来说：

ui.position.left += (ui.offset.left - ui.originalPosition.left - leftOffset)*SPEED;

然后，您可以在jQuery的.fadeTo()（或其他）函数中使用$('#bar').offset().left来更改您正在谈论的图像的不透明度。
这一切看起来都很琐碎，但事实并非如此。在试图实现这一点时存在一些问题。举例来说：
当滑块达到最大滑动距离时，它应该停止动画或重置。你可以通过多种方式来实现这一点，但我认为最简单的解决方案是编写一个.mousedown/.mouseup侦听器，它更新一个变量dragging，跟踪用户是否仍在尝试拖动#bar。如果不是，重置#bar。如果是，则将滑块保持在最大距离，直到.mouseup被触发。
此外，您必须小心预定义的边框。
我建议的代码如下：

// Specify your variables here
var SPEED = -0.6;
var border = 1;           // specify border width that is used in CSS
var fadeSpeed = 0;        // specify the fading speed when moving the slider
var fadeSpeedBack = 500;  // specify the fading speed when the slider reverts back to the left

// Some pre-calculations
var dragging = false;
var slider = $('#slider');
var leftOffset = slider.offset().left + border;
var adjustedSliderWidth = 0.5*slider.width();

// the draggable function
$('#bar').draggable({
    axis: "x",
    revert : function(event, ui) {
            $(this).data("draggable").originalPosition = {
                top : 0,
                left : 0
            };
            $('#image').fadeTo(fadeSpeedBack, 0);
            return !event;
        },
    drag: function (event, ui) {
        var barOffset = $('#bar').offset().left - leftOffset;
        if (barOffset >= 0) {
            if (barOffset < adjustedSliderWidth) {
              ui.position.left += (ui.offset.left - ui.originalPosition.left - leftOffset)*SPEED;    
            } else {
              if (!dragging) { return false; } 
                else { ui.position.left = adjustedSliderWidth; }
            }
        }
        // fading while moving:
        $('#image').fadeTo(fadeSpeed, (ui.position.left/adjustedSliderWidth));
        
        // remove this if you don't want the information to show up:
        $('#image').html(ui.position.left/adjustedSliderWidth
                        +"<br \><br \>"
                        +ui.position.left);
    }
});

// the mouse listener
$("#bar").mousedown(function(){ dragging = true; });
$("#bar").mouseup(function(){ dragging = false; });

我还在draggable上实现了revert选项，因此当用户释放#bar时，滑块会很好地返回到零。当然，如果你愿意，你可以删除它。
现在你的整个问题是关于变量的：SPEED。
可以通过为此变量指定一个数字来指定拖动速度。
例如：

var SPEED = 0.0;         // the normal dragging speed
var SPEED = 0.5;         // the dragging speed is 1.5 times faster than normal
var SPEED = -0.5;        // the dragging speed is 0.5 times faster than normal

因此，* 负 * 值给予 * 较慢 * 的拖动速度，而 * 正 * 值给予 * 较快 * 的拖动速度。
事实上（或实际上：幸运的是，它是 * 不 * 可能改变鼠标指针的速度。这是因为只有操作系统可以控制鼠标的坐标和速度。浏览器无法影响这一点。我个人认为这并不重要：移动滑块比正常速度慢是你试图实现的，所以你可以忽略鼠标指针。
为了看到这一切，我为你准备了一个工作的jsFiddle：

DEMO

希望这对你有帮助：）