使用偏移量和 jQuery 滑块

我正在使用 offset() 和 jquery slider，我非常接近实现我的目标，但它有点偏离。我使用 animate 将其动画化到顶部 CSS 坐标，但是如果您查看：http://www.ryancoughlin.com/demos/interactive-slider/index.html- 你会看到它在做什么。我的目标是让它 fadeIn() 并在手柄右侧显示值。我知道我可以使用简单的边距：0 0 0 20px 将文本从句柄上偏移。

该部分将 #current_value 与句柄右侧对齐。想法？ var Slide_int = null;

$(function(){

    $("h4.code").click(function () {
        $("div#info").toggle("slow");
    });

    $('#slider').slider({
        animate: true,
        step: 1,
        min: 1,
        orientation: 'vertical',
        max: 10,
        start: function(event, ui){
            $('#current_value').empty();
            slide_int = setInterval(update_slider, 10); 
        },
        slide: function(event, ui){
            setTimeout(update_slider, 10);  
        },
        stop: function(event, ui){
            clearInterval(slide_int);
            slide_int = null;
        }
    }); 
});
function update_slider(){
    var offset = $('.ui-slider-handle').offset();
    var value = $('#slider').slider('option', 'value');

    $('#current_value').text('Value is '+value).css({top:offset.top });
    $('#current_value').fadeIn();

}

我知道我可以使用边距来抵消它以匹配，但是有更好的方法吗？

有两个问题。第一个，就像 Prestaul 所说，滑块事件在移动的“开始”而不是结束时触发，因此偏移量是错误的。您可以通过设置超时来解决此问题：

$(function(){
    slide: function(event, ui){
        setTimeout(update_slider, 10);
    },
    ...
});
function update_slider()
{
    var offset = $('.ui-slider-handle').offset();
    var value = $('#slider').slider('option', 'value');
    $('#current_value').text('Value is '+value).animate({top:offset.top }, 1000 )
    $('#current_value').fadeIn();
}

第二个问题是移动是瞬时的，而动画不是，这意味着标签将滞后于滑块。我想出的最好的办法是：

var slide_int = null;

$(function(){
    ...
    start: function(event, ui){
        $('#current_value').empty();
        // update the slider every 10ms
        slide_int = setInterval(update_slider, 10);
    },
    stop: function(event, ui){
        // remove the interval
        clearInterval(slide_int);
        slide_int = null;
    },
    ...
});

function update_slider()
{
    var offset = $('.ui-slider-handle').offset();
    var value = $('#slider').slider('option', 'value');

    $('#current_value').text('Value is '+value).css({top:offset.top });
    $('#current_value').fadeIn();
}

通过使用css代替animate，您可以将其始终放在滑块旁边，以换取平滑过渡。希望这可以帮助！