jQuery UI Slider - 동기화되지 않은 핸들 및 스크롤 내용의 애니메이션

Question

내 용도에 맞게 사용자 정의 된 jQuery UI 슬라이더를 가져 오는 데 문제가 있습니다.

로드 할 때 슬라이더와 그 내용이 자동으로 특정 위치로 움직입니다. 이상적으로 그것은 맨 오른쪽으로 애니메이션을 적용한 다음 사용자가 스크롤 내용이나 슬라이더를 움직이지 않는 한 멈추고 다시 애니메이션으로 돌아와야합니다 (루프로). 지금과 같은 값을 설정하려고하면

var scrollbar = $("#slider").slider({ 
    animate: 3000, 
    min: 0, 
    max: $("#timeline_content .items").width(), 
    change: handleSlider, 
    slide: handleSlider 
}); 
function handleSlider(e, ui) { 
    $("#timeline_content").stop().animate({scrollLeft: ui.value}, scrollbar.slider("option", "animate")); 
} 

가 :

이

$('#slider').slider({'value': 1000}); 

스크롤 내용이 잘 애니메이션을하지만, 핸들이 단지에 점프 내 기본 슬라이더 설정 (http://jsfiddle.net/mayko/j6WuE/1/) 다음

그 새로운 위치.

슬라이더 트랙 자체를 클릭해도 스크롤 내용과 슬라이더 핸들의 애니메이션이 동기화되지 않습니다.

누구에게 해결책이 있습니까?

Answer 1

"애니메이션"옵션은 스크롤 막대의 클릭에만 적용됩니다. 애니메이션은 값을 수동으로 설정하여 트리거되지 않습니다.

슬라이더를 움직이게하려면 사용자 입력을 시뮬레이트 (예 : 슬라이더 막대에서 클릭 트리거)하거나 증분 값 설정으로 가짜로 만들어야합니다.

불행히도 슬라이더가 슬라이더 막대 영역과 함께 펑키 한 것들을 수행하는 것으로 보이고 거기에서 클릭을 트리거 할 수 없었습니다. 당신은 가짜를 시도하고 슬라이더를 드래그 할 수 있습니다.

그래서 대안으로 슬라이더의 값을 반복적으로 설정하지만 끔찍한 것처럼 보입니다. 죄송합니다

function advanceSlider(next){ 
    scrollbar.slider('value',next) 
     if(next<1050) 
      setTimeout(function() { advanceSlider(next+50) },150); 
} 
advanceSlider(1); 

, jsFiddle