Configuré una barra de progreso de jQuery UI pero no puedo usar jQuery animate para animar su valor. ¿Alguna idea de cómo hacer que esto funcione?
La variable percentDone contiene un número de 0 a 100 que muestra qué tan lejos debe estar la barra de desplazamiento (esto funciona bien).
He intentado varias cosas diferentes en vano. Esto es lo que tengo hasta ahora:
var progressbar = $("#progressbar1").widget(); progressbar.animate({ value: percentDone }, 5000, function() { console.debug('done animating'); });Tenga en cuenta que si actualizo la barra de desplazamiento con el método "valor", funciona bien, pero salta a ese valor en lugar de animarlo sin problemas:
$("#progressbar1").progressbar('value', percentDone); $(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); }); $(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 */ } });En una aplicación real, es posible que no necesite generar un bucle, por ejemplo, mientras carga un archivo, su aplicación flash le indicará el tamaño del archivo y le informará cuando haya alcanzado el valor máximo necesario, por lo que mi primer código pretende demostrar solo el uso del setter y getter de la barra de progreso y, por supuesto, lo que hace que todo funcione, es decir, por ejemplo, el bucle; la segunda es una adaptación del mismo concepto con azúcar.
Con CSS3 no es necesario utilizar JavaScript para administrar el valor de la barra de progreso directamente. Solo agrega esto a tu estilo:
.ui-progressbar-value { transition: width 0.5s; -webkit-transition: width 0.5s; }Puede obtener más información sobre las transiciones de CSS3 .
Aquí se explica cómo hacer que se anime sin problemas, en lugar de la forma un tanto brusca sugerida en la respuesta actualmente aceptada de @aSeptik. Omite el .progressbar('value, ...) .
// 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')