オフセットとjQueryスライダの使用

Question

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

2つの問題があります。 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(); 
} 

第二の問題は、アニメーションがラベルはスライダーに後れを取るだろうことを意味し、いない間移動は、瞬間的であるということです。私が思い付くした最高のがこれです：css代わりのanimateを使用することにより

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(); 
} 

、あなたはスムーズな移行と引き換えに、次のスライダーに必ず保管してください。お役に立てれば！

Answer 2

異なるイベントを使用するだけです。ハンドルが動かされる前に「スライド」が点火され、あなたの値は前のハンドル位置に終わる。 "change"イベントを試してみてください。

Answer 3

私は同じ問題を抱えていました.Jquery Uiスライダの可視値が内部値から遅れています。スライダーイベントを「スライド」から「変更」に変更することで問題を解決しました。