2009-04-13 14 views
4

jqueryスライダでoffset()を使用していますが、私は目標を達成するのに非常に近いですが、少しばかりです。私はアニメーションを使用してトップ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(); 

} 

マージンを使用して一致させることができますが、より良い方法はありますか?

答えて

8

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

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

+0

Hey!ご協力ありがとうございました。更新されたコードで質問を更新しても、正しく動作していないようです。私がしたことに関するアイデアは何ですか?それは正しく見える、それは私の機能の場所ですか?値はそれに続く新しいコードではありません。ありがとう、Ryan – Coughlin

+0

申し訳ありませんが、update_sliderは$()関数の外にある必要があります。 – tghw

+0

私はそれに応じてそれを更新しました。また、slide_intは$()関数の外になければなりません。 – tghw

0

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

2

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

関連する問題