重置jquery ui滑块句柄位置

Question

我遇到了 jquery ui 滑块的情况。我在 div 中有一个隐藏溢出的图像，可以在 div 内缩放和平移。滑块控制图像的放大和缩小，问题是如果我单击重置或更改图像，处理程序将不会回到其初始位置（在滑块的中间）。

跟随这个活生生的例子：http://jsfiddle.net/omegaiori/QWfHE/3/embedded/result/ 使用滑块放大到最大尺寸，然后点击重置按钮。 会发生什么情况是图像被缩小到原来的大小，但不能再次放大。

这是滑块的功能：

    $(function () {
        $("#slider-vertical").slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: 1000,
            value: 500,
            slide: function (event, ui) {
                var prevVal = $("#amount").val();
                var newVal = ui.value;
                if (prevVal > newVal) {
                    zoomOut();
                } else {
                    zoomIn();
                }

                $("#amount").val(ui.value);
            }
        });
        $("#amount").val($("#slider-vertical").slider("value"));
    });

我需要每次我的条件发生变化（我改变图片，我点击重置或调整按钮），jquery ui 滑块的句柄回到它所属的位置......在滑块的中心:)

有人可以帮帮我吗？那太好了:)

Answer 1

使用此行设置单击重置按钮时的值：

$("#slider-vertical").slider('value', 500);

FIDDLE

Answer 2

您有很多冗余代码。也许实现以下功能会更好：

function resize(factor) {
   // do the image resizing here and adjust all controls accordingly
}

然后从其他函数调用这个函数：

function zoomIn() {
    resize(1.05);
}

// etc...

这样，您可以确保图像和控件每次都处于一致状态。您可以使用$("#slider-vertical").slider('value', newposition); 操作滑块位置（您必须先计算newposition）