L'animation poignée du curseur lors de la modification de l'INTERFACE utilisateur de jQuery curseur de la valeur de l'option?

Je suis à l'aide de l'INTERFACE utilisateur de jQuery (1.8) widget de curseur pour permettre à l'utilisateur de glisser/faire défiler une série d'icônes horizontale. Parfois, j'ai envie de déplacer le curseur par programmation et de la bonne façon de le faire est par la modification de l'option "valeur", comme ceci:

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

Le mouvement de la poignée du curseur est instantanée. J'aimerais que la motion soit animée. Cela peut être fait à un niveau inférieur, par l'animation de la "gauche" propriété CSS de la poignée, comme ceci:

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

...mais si je fais cela, je viens de mettre la propriété à gauche du CSS pour la poignée. La valeur réelle du curseur n'est pas affectée. Alors j'ai pensé à l'ajout d'un rappel à la fin de l'animation dont la valeur est définie, quelque chose comme ceci:

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

Quand j'ai essayer le code ci-dessus (avec le rappel), je reçois un jQuery erreur sur trop de récursivité, donc je pense que ce n'est pas une bonne façon d'accomplir ce que je veux (laid code).

Est-il une meilleure façon d'animer la poignée du curseur lorsque la valeur du curseur est modifié par programmation?

Merci d'avance!
/Thomas Kahn

OriginalL'auteur tkahn | 2010-11-08

  1. 22

    Vous suffit alors d'activer le animate option sur le curseur pour effectuer cette opération. À partir de la documentation:

    Qu'à glisser la poignée de douceur lorsque l'utilisateur clique en dehors de la poignée sur la barre. Aussi d'accepter une chaîne de caractères représentant l'une des trois vitesses prédéfinies ("slow", "normal", ou "rapide") ou le nombre de millisecondes pour exécuter l'animation (par exemple 1000).

    Donc votre code devrait ressembler à quelque chose comme ceci: 

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

    Voici une démo en live de ce: http://www.jsfiddle.net/VVHGx/

    Je pense que je sais ce que vous faites fausse - vous besoin de changer la valeur du curseur via le .slider('value') méthode au lieu de la .slider('option', 'value) méthode: 

    $('#content-slider').slider('value', 42);
    J'ai déjà l'option "animation:true" est activé et que le curseur est animé lorsque je clique sur la barre du curseur. Mais si je change la valeur par programmation en modifiant l'option, le mouvement de la poignée du curseur n'est pas animé, il a juste sauts à la nouvelle position.
    sa démonstration changements via .slider('value', newValue)...
    Aha! En regardant la démo, je vois qu'ils ne sont pas à l'aide de "option", ils sont à définir la nouvelle valeur comme ceci: $("sélecteur").curseur('valeur', 100); et lorsque vous utilisez cette syntaxe, il anime! Grâce Yi Jiang!
    ne fait pas de transition de la valeur...

    OriginalL'auteur Yi Jiang

  2. 3

    Dans le cas où 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;
});

    OriginalL'auteur JB.