使用offset和jQuery滑块

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,您将它始终保持在滑块旁边,以换取平滑过渡.希望这可以帮助!