javascript - 使用偏移量和 jQuery slider

Question

我将 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();

}

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

Answer 1

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

$(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();
}

第二个问题是移动是瞬时的，而动画不是，这意味着标签会滞后于 slider 。我想到的最好的是:

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，您可以将它始终放在 slider 旁边，以换取平滑的过渡。希望这对您有所帮助!