Salut !

Je suis en train de coder une petite animation en JQuery pour afficher les résultats de votes à l'ouverture de la page. Donc pour expliquer rapidement le déroulement voulu. Dans un premier temps on attend le chargement complet de la page puis on attends 500ms. Et ensuite on affiche le pourcentage sur la barre de progression avec animate sur 2000ms tout en incrémentant le nombre de voix totales en même temps. Pour être plus clair voici le rendu visuel.

Voici le code d'une barre.

<div id="1" class="progress-bar" value="21" voices="12">
    <div class="progress"></div>
    <div class="label">0 voix</div>
<div>

L'attribut value donner le pourcentage et voices le nombres de voix, les calculs sont fait en php pour 1 à 10 barres. Et enfin mon JQuery qui ne fonctionne pas pour l'incrémentation puisqu'elle ne se fait pas et le total de voix est directement affiché. D'autant plus que mon code ne doit surement pas être très optimisé.

$(document).ready(function(){
	$(document).delay(500)
	   .queue(function(){
		var votes = $('#1.progress-bar').attr('value');
		var voices = $('#1.progress-bar').attr('voices');
		$('#1.progress-bar > .progress').animate({width: votes + '%'}, 2000);
		var i = 0
		while (i < voices) {
			i++
			$('#1.progress-bar > .label').delay(2000 / voices).text(i + 'voix');
		}
	})
});

Merci beaucoup pour toute aide !

-
Edité par BD_ 22 juillet 2016 à 22:48:34

S'il vous plait.

Salut! J'ai vu ton post, j'ai pas vraiment compris ce que tu voulais faire.

Je ne connaissais pas du tout l'animation css (enfin il y a 20 minutes)  , mais j'ai fait un petit truc, avec un bouton qui incremente la taille de la div

<button id ="button">Click</button>


<div id="1" class="progress-bar" value="12" voices="20">
    <div class="progress"></div>
    <div class="label">0 voix</div>
</div>


<script type="text/javascript">
	
	function setText(){

		var value = $('#1.progress-bar').attr('value');
		var voices = $('#1.progress-bar').attr('voices');

		var i =0;
        while (i < value) {
            i++
            $('#1.progress-bar > .label').delay(2000 / voices).text(i + ' voix sur ' + voices);
        }

	}



$(document).ready(function(){
    $(document).delay(500)
       .queue(function(){
        var value = $('#1.progress-bar').attr('value');
        var voices = $('#1.progress-bar').attr('voices');

        $('#1.progress-bar').animate({width: value + '%'}, 1000);
		setText();

    })
});


$('button').click(function(){
	var value = $('#1.progress-bar').attr('value');

	var voices = $('#1.progress-bar').attr('voices');

	/*Verifie si il y a bien */
	if (value<voices) {
		value++;
		console.log(value);
		/*Set les attributs*/
		$('#1.progress-bar').attr('value', value);
		$('#1.progress-bar > .label').html(value + 'voix');


		var value = $('#1.progress-bar').attr('value');
		console.log($('#1.progress-bar').css("width"));

		$('#1.progress-bar').animate({width: value + '%'}, 500);


		setText();

	}


});




</script>


<style type="text/css">
	.progress-bar{
		width: 0%;
		background-color: #777;
	}



</style>

J'ai mis un style spécial car j'ai pas de css pour progress-bar.

Je sais pas si ca va t'aider.

En fait, ce que je veut faire c'est incrémenter le nombre de voix affiché sur la barre. J'ai donc utilisé une boucle mais le problème c'est que la modification du texte dans la boucle ne se fait pas l'une après l'autre mais elles se font toutes d'un coup (au rythme des tours de boucle).

J'ai essayé une autre façon de faire légèrement différente avec un setTimeout cependant le navigateur crash lors de l'exécution du script que voici.

$( function(){
	var votes = $('#1.progress-bar').attr('value');
	var voices = $('#1.progress-bar').attr('voices');
	$('#1.progress-bar > .progress').animate({width: votes + '%'}, 2000);
	var i = 0
	while (i < voices) {
		var delay = 2000 / voices * i;
		setTimeout(function increase(i) {
			$('#1.progress-bar > .label').text(i + ' voix');
		}, delay);
	}
});

Si quelqu'un pourrait m'aider à trouver mes erreurs merci beaucoup.