Анимирование дескриптора слайдера при изменении значения параметра слайдера пользовательского интерфейса jQuery? - PullRequest
Новая
       10

Анимирование дескриптора слайдера при изменении значения параметра слайдера пользовательского интерфейса jQuery?

4 голосов
/ 08 ноября 2010

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

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

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

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

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

$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450, function() {
    // Callback - set the new slider value
    $("#content-slider").slider("option", "value", position);
});

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

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

Заранее спасибо!/ Томас Кан

Ответы [ 2 ]

22 голосов
/ 08 ноября 2010

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

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

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

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

Вот живая демонстрация этого: http://www.jsfiddle.net/VVHGx/

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

$('#content-slider').slider('value', 42);
3 голосов
/ 10 февраля 2012

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

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

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