Rotation DIV infini

Version imprimable

Rotation DIV infini

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:

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.

27/11/2013, 10h37
danielhagnoul

Bonjour

Piste : setInterval().

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

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

Code:

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);		
});