Question

我正在使用带有jquery滑块的offset（）并且我非常接近实现我的目标，但是它有些偏差。我使用动画来设置顶部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();

}

我知道我可以使用保证金抵消它以匹配，但有更好的方法吗？

Answer 1

有两个问题。第一个，就像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，您可以将其始终放在滑块旁边，以换取平滑过渡。希望这有帮助！

Answer 2

我遇到了同样的问题：Jquery Ui滑块中的可见值滞后于内部值。通过将滑块事件从“幻灯片”更改为“更改”来解决此问题。

Answer 3

您只需要使用其他活动。在移动手柄之前“滑动”会触发，因此您的值将在前一个手柄位置结束。尝试“更改”事件，看看是否能让你到达那里。

使用offset和jQuery滑块

3 个答案: