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

Question

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

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

Answer 3

У меня была та же проблема: видимое значение в слайдере JQuery UI отстает от внутреннего значения. Исправлена ​​проблема, изменяя событие слайдера с «слайда» на «изменить».