Использование смещения и слайдера jQuery

Question

Я использую offset () с помощью ползунка jquery, и я так близок к достижению своей цели, но это не так. У меня есть анимация с использованием 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

Есть две проблемы. Первое, как сказал Престол, событие ползунка срабатывает в начале движения, а не в конце, поэтому смещение неверно. Вы можете исправить это, установив таймаут:

$(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

Вам просто нужно использовать другое событие. «Слайд» срабатывает до перемещения маркера, поэтому ваше значение оказывается в предыдущей позиции маркера. Попробуйте событие "изменить" и посмотрите, приведет ли это вас туда.