Discussion :

[Theodoz]

Bonjour,

Je vous demande votre aide car je viens de me mettre au Javascript et je dois faire une animation en rotation infini sur une DIV, voila la fonction que j'ai créer qui marche mais ne se répète pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){  
       function bis(){ 
             $('#div').animate({borderSpacing:'+=360'}, {
                   step: function(now,fx) {
                           $(this).css('-webkit-transform','rotate('+now+'deg)'); 
                           $(this).css('-moz-transform','rotate('+now+'deg)');
                           $(this).css('transform','rotate('+now+'deg)');
                           $(this).css('-ms-transform','rotate('+now+'deg)');
                           $(this).css('-o-transform','rotate('+now+'deg)');
       },duration:5000     
     }, bis);
       };
       bis();    
});

Merci d'avance.

[danielhagnoul]

Bonjour

Piste : setInterval().

Attention, en jQuery nous en sommes à la version 1.10.2 !

[Theodoz]

Merci pour votre piste, j'ai finalisé le code et rajouter le paramètre easing.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){  
	setInterval(function bis(){ 
		$('#clock01').animate({borderSpacing:'+=360'}, {
			step: function(now,fx) {
	  			$(this).css('-webkit-transform','rotate('+now+'deg)'); 
      			$(this).css('-moz-transform','rotate('+now+'deg)');
      			$(this).css('transform','rotate('+now+'deg)');
	  			$(this).css('-ms-transform','rotate('+now+'deg)');
      			$(this).css('-o-transform','rotate('+now+'deg)');
            }, duration:5000, easing:'linear'    
		});		
	}, 10);		
});