Animer la poignée du curseur lors de la modification de l'option de valeur du curseur de l'interface utilisateur jQuery?

Question

J'utilise le widget curseur jQuery UI (1.8) pour permettre à l'utilisateur de faire défiler une série d'icônes horizontalement. Parfois, je veux déplacer le curseur et programatically la bonne façon de le faire est en modifiant l'option « valeur », comme ceci:

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

Le mouvement de la poignée du curseur est instantanée bien. J'aimerais que la motion soit animée. Cela peut se faire à un niveau inférieur, en animant la « gauche » propriété CSS de la poignée, comme ceci:

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

... mais si je le fais, je viens de définir la propriété gauche du CSS la poignée. La valeur réelle du curseur n'est pas affectée. Donc, je pensais que l'ajout d'un rappel à la fin de l'animation où la valeur est définie, quelque chose comme ceci:

Lorsque je tente le code ci-dessus (avec le rappel) je reçois une erreur jQuery au sujet trop récursion , donc je pense que ce n'est pas un bon moyen d'accomplir ce que je veux (code moche).

Y a-t-il un meilleur moyen d'animer la poignée du curseur lorsque la valeur du curseur est modifiée par programmation?

Merci d'avance! /Thomas Kahn

Answer 1

Vous activez simplement l'option animate sur le curseur pour accomplir cela. De la documentation:

Que ce soit pour glisser la poignée en douceur lorsque l'utilisateur clique sur la poignée extérieure de la barre. Acceptera également une chaîne représentant l'une des trois vitesses prédéfinies ("lent", "normal" ou "rapide") ou le nombre de millisecondes pour exécuter l'animation (par exemple 1000).

donc votre code

ressemblera à quelque chose comme ceci:

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

Voici une démonstration en direct de cette: http://www.jsfiddle.net/VVHGx/

---

Je pense que je sais ce que vous faites mal - vous avez besoin pour modifier la valeur du curseur via la méthode .slider('value') au lieu de la méthode .slider('option', 'value) `:

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

Answer 2

Si vous essayez de le faire avec un curseur de plage:

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

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

• forked fiddle