jQuery UI Slider - Анимация содержимого дескриптора и прокрутки не синхронизирована - PullRequest
Новая
       16

jQuery UI Slider - Анимация содержимого дескриптора и прокрутки не синхронизирована

2 голосов
/ 21 ноября 2011

У меня проблемы с настройкой слайдера пользовательского интерфейса jQuery для моих целей.

При загрузке слайдер и его содержимое должны автоматически анимироваться в определенную позицию. В идеале он должен анимироваться вправо, затем останавливаться и затем анимироваться назад (в виде цикла), пока пользователь не наводит курсор мыши на содержимое прокрутки или ползунок.

Следуя настройке слайдера по умолчанию (http://jsfiddle.net/mayko/j6WuE/1/):

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

Содержимое прокрутки приятно анимируется, но ручка просто переходит на эту новую позицию.

Даже если я нажму на дорожку слайдера, анимация содержимого прокрутки и дескриптор слайдера не синхронизируются.

У кого-нибудь есть решение?

1 Ответ

1 голос
/ 21 ноября 2011

Опция «animate» применяется только к щелчку на полосе прокрутки. Анимация не запускается, если вручную установить значение, как вы сделали.

Чтобы сдвинуть ползунок, вам нужно либо имитировать пользовательский ввод (например, вызвать щелчок на ползунке), либо подделать его с установкой инкрементного значения.

К сожалению, кажется, что слайдер делает что-то интересное с областью ползунка, и я не смог вызвать щелчок там; Вы могли бы попытаться подделать щелчок и перетащить ползунок, возможно?

Таким образом, альтернативой является повторная установка значения ползунка, но это выглядит ужасно. 

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

Извините, jsFiddle

...