使用偏移量和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滑塊

回答

相關問題