Анимация ползунка при изменении значения параметра слайдера jQuery UI?

Question

Я использую виджет слайдера jQuery UI (1.8), чтобы позволить пользователю скользить/прокручивать серию значков по горизонтали. Иногда я хочу, чтобы переместить ползунок и программно правильный способ сделать это путем изменения параметра «значение», как это:

$("#content-slider").slider("option", "value", 37); 

Движение ползуна ручки мгновенно, хотя. Я хочу, чтобы движение было оживленным. Это может быть сделано на более низком уровне, оживляющий «влево» CSS свойство ручки, как это:

$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450); 

... но если я это сделаю, я просто установить левое свойство CSS для рукоять. Фактическое значение ползунка не изменяется. Так я думал о добавлении обратного вызова в конце анимации, где устанавливается значение, что-то вроде этого:

Когда я пытаюсь код, указанный выше (с обратного вызова), я получаю ошибку JQuery о слишком много рекурсии , поэтому я думаю, что это не очень хороший способ добиться того, что я хочу (уродливый код).

Есть ли лучший способ анимировать рукоятку ползунка, когда значение ползунка изменяется программно?

Заранее благодарен! /Thomas Kahn

Answer 1

Вы просто включите опцию animate на слайдере, чтобы выполнить это. Из документации:

Следует ли плавно перемещать ручку, когда пользователь нажимает наружу ручку на планке. Также примет строку, представляющую одну из трех предопределенных скоростей («медленная», «нормальная» или «быстрая») или количество миллисекунд для запуска анимации (например, 1000).

Поэтому ваш код будет выглядеть примерно так:

$("#content-slider").slider({ 
    animate: true 
}); 

Вот демо этого: http://www.jsfiddle.net/VVHGx/

---

Я думаю, что я знаю, что вы делаете неправильно - вам нужно для изменения значения ползунка с помощью метода .slider('value') вместо метода .slider('option', 'value) `:

$('#content-slider').slider('value', 42); 

Answer 2

В случае, если вы пытаетесь сделать это с помощью ползунка диапазона:

var slider = $("#slider").slider({ 
    animate: true, 
    range : true, 
    values: [10,40] 
}); 

$('#move').click(function(){ 
    slider.slider('values', [0,60]); 
    return false; 
}); 

• forked fiddle