使用offset和jQuery滑块

我正在使用带有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

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