Comment animer la valeur d'une barre de progression jQuery UI ?

Question

J'ai mis en place une barre de progression jQuery UI mais je n'arrive pas à utiliser jQuery animate pour animer sa valeur. Avez-vous des idées sur la façon de faire fonctionner cette barre ?

En percentDone contient un nombre de 0 à 100 indiquant la distance à laquelle la barre de défilement doit se trouver (cela fonctionne bien).

J'ai essayé plusieurs choses différentes, sans succès. Voici ce que j'ai jusqu'à présent :

var progressbar = $("#progressbar1").widget();

progressbar.animate({
    value: percentDone
}, 5000, function() {
    console.debug('done animating');
});

Notez que si je mets à jour la barre de défilement à l'aide de la méthode "value", cela fonctionne bien, mais elle saute sur cette valeur au lieu de l'animer en douceur :

$("#progressbar1").progressbar('value', percentDone);

Answer 1

• DEMO 1 : le premier, preuve de concept

  $(function() { var pGress = setInterval(function() { var pVal = $('#progressbar').progressbar('option', 'value'); var pCnt = !isNaN(pVal) ? (pVal + 1) : 1; if (pCnt > 100) { clearInterval(pGress); } else { $('#progressbar').progressbar({value: pCnt}); } },10); });

• DEMO 2 : : adaptation de la réponse de @Peter ci-dessous pour le bien de tous ;-).

  $(function() { $('#progressbar').progressbar(); // inizializa progressbar widget $pVal = $('.ui-progressbar-value').addClass('ui-corner-right'); var pGress = setInterval(function() { //generate our endless loop var pCnt = $pVal.width(); // get width as int // generate a random number between our max 100 and it's half 50, // this is optional, and make the bar move back and forth before // we reach the end. var rDom = Math.floor(Math.random() (100 - 50 + 1) + 50); var step = rDom >= 100 ? 100: rDom; // reached our max ? reset step. doAnim(step); },1000); var doAnim = function(wD) { // complete easing list http://jqueryui.com/demos/effect/easing.html $pVal.stop(true).animate({width: wD + '%'},1000, 'easeOutBounce'); if (wD >= 100) clearInterval(pGress) / run callbacks here */ } });

Dans une application réelle, il se peut que vous n'ayez pas besoin de générer une boucle, par exemple, pendant le téléchargement d'un fichier, votre application Flash vous indiquera la taille du fichier et vous fera savoir quand vous aurez atteint la valeur maximale nécessaire. Mon premier code a donc pour but de démontrer l'utilisation des setter et getter de la barre de progression et, bien sûr, ce qui fait jouer l'ensemble, c'est-à-dire, par exemple, la boucle ; le second est une adaptation du même concept avec Sugar.

Answer 2

Animation avec CSS3

Avec CSS3, il n'est pas nécessaire d'utiliser JavaScript pour gérer directement la valeur de la barre de progression. Il suffit d'ajouter ceci à votre style :

.ui-progressbar-value {
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

Vous pouvez en savoir plus sur Transitions CSS3 .

Answer 3

Voici comment l'animer en douceur, plutôt que de la manière quelque peu saccadée suggérée dans la réponse actuellement acceptée de @aSeptik. Elle contourne le .progressbar('value, ...) méthode.

// On load, make the progressbar inside always have round edges:
// (This makes it look right when 100%, and seems nicer all the time to me.)
$("#progressbar .ui-progressbar-value").addClass("ui-corner-right");

new_width = "50px";  // you will need to calculate the necessary width yourself.
$("#progressbar .ui-progressbar-value").animate({width: new_width}, 'slow')

Answer 4

Une très bonne solution sur le forum jquery

http://forum.jquery.com/topic/smooth-progressbar-animation

la barre de progression doit être initialisée avec disons 0.1 pour fonctionner

$("#progressbar .ui-progressbar-value").animate(
{
  width: "67%"
}, {queue: false});

Answer 5

J'ai écrit ce plugin/méthode pour animer très facilement n'importe quelle barre de progression, et ça marche très bien pour moi, donc j'espère que ça marchera pour tout le monde aussi.

(function( $ ) {
    $.fn.animate_progressbar = function(value,duration,easing,complete) {
        if (value == null)value = 0;
        if (duration == null)duration = 1000;
        if (easing == null)easing = 'swing';
        if (complete == null)complete = function(){};
        var progress = this.find('.ui-progressbar-value');
        progress.stop(true).animate({
            width: value + '%'
        },duration,easing,function(){
            if(value>=99.5){
                progress.addClass('ui-corner-right');
            } else {
                progress.removeClass('ui-corner-right');
            }
            complete();
        });
    }
})( jQuery );

Il suffit d'ajouter ce code en haut de votre page, n'importe où, et de l'utiliser sur un élément comme suit

$('#progressbar').animate_progressbar(value [, duration] [, easing] [, complete] );

---

EDITAR:

Voici une version miniaturisée du code, qui permet un chargement un peu plus rapide.

(function(a){a.fn.animate_progressbar=function(d,e,f,b){if(d==null){d=0}if(e==null){e=1000}if(f==null){f="swing"}if(b==null){b=function(){}}var c=this.find(".ui-progressbar-value");c.stop(true).animate({width:d+"%"},e,f,function(){if(d>=99.5){c.addClass("ui-corner-right")}else{c.removeClass("ui-corner-right")}b()})}})(jQuery);