使用偏移量和jQuery滑块

我使用偏移量（）与jquery滑块，我很接近实现我的目标，但它是关闭略有。我使用顶部CSS坐标的动画效果进行动画制作，但如果您签出：http://www.ryancoughlin.com/demos/interactive-slider/index.html - 您会看到它在做什么。我的目标是让它fadeIn（）并显示在句柄右侧的值。我知道我可以使用简单的边距从句柄中偏移文本：0 0 0 20px。使用偏移量和jQuery滑块

该部分将#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(); 

}

我知道我可以用margin来抵消它匹配，但是有没有更好的方法？

来源

2009-04-13 Coughlin

有两个问题。第一个，就像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，你把它总是在滑块旁边，换来了平稳过渡。希望这可以帮助！

来源

2009-04-13 20:49:23 tghw

嘿！感谢您的帮助。我用我更新的代码更新了我的问题，似乎没有正确行事。关于我做了什么的任何想法？它看起来不错，是我的功能的位置？该值不会跟随新代码。谢谢，瑞安 – Coughlin 2009-04-13 21:51:21

你只需要使用不同的事件。 “幻灯片”在手柄移动之前触发，因此您的价值在前一个手柄位置结束。尝试“改变”事件，看看是否让你在那里。

来源

2009-04-13 20:28:51 Prestaul

我有同样的问题：JQuery UI滑块中的可见值滞后于内部值。通过将滑块事件从“幻灯片”更改为“更改”来解决此问题。

来源

2012-09-03 09:01:58

使用偏移量和jQuery滑块

回答

相关问题