Discussion :

[Gab89]

Bonjour à tous,

je bloque sur un script jquery :

Je voudrais faire tourner une div et sa sous-div :

<div id="plateau" class="plateau-rotation">
<div id="disque">
</div>
</div>

en utilisant les propriétés css 3 suivantes (qui fonctionnent lorsque je les essaie directement dans le css :

-webkit-transform: rotate() scale();
-moz-transform: rotate() scale();
-ms-transform: rotate() scale();
transform: rotate() scale();

Voici donc ma fonction qui devrait permettre de faire tourner cette div avec une vitesse de rotation de 33 tours par minute (d'après mon calcul) :

Code :

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

1
2
3
4
5
6
7
8
9
function rotation_plateau_33()
	{
		$(".plateau-rotation").animate({ 
			-webkit-transform:rotate('-=0.59'deg),
			-moz-transform:rotate('-=0.59'deg),
			-ms-transform:rotate('-=0.59'deg),
			transform:rotate('-=0.59'deg)
		}, 3);
	}

J'ai manifestement fait une erreur de syntaxe quelque part.
cette fonction est ensuite appelé dans l’évènement click d'un bouton qui fonctionne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function playTrack(t,n)
	{
		$("#jquery_jplayer").jPlayer("setFile", t).jPlayer("play");
 
		showPauseBtn();
		rotation_plateau_33();
 
		$("#trackname").fadeOut(function(){
			$("#trackname").text(n);
			$("#trackname").fadeIn();
		});
 
		$("#trackname2").fadeOut(function(){
			$("#trackname2").text(n);
			$("#trackname2").fadeIn();
		});
 
		$("#pcent").fadeOut(function(){
			$("#pcent").fadeIn();
		});
 
		return false;
	}

Je voudrais également créer une fonction qui stopperai l'effet de rotation, en laissant la position de rotation sur la valeur du moment du click

[SpaceFrog]

Code :

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

1
2
3
4
5
6
$(".plateau-rotation").animate({
"-moz-transform":"rotate('-=0.59'deg)",
"-moz-transform":"rotate('-=0.59'deg)",
"-ms-transform":"rotate('-=0.59'deg)",
"transform":"rotate('-=0.59'deg)"
}, 3);

???

[Gab89]

Malheureusement cela ne fonctionne pas...

[Samolo]

Bonjour,
Je suis pas sûr à 100% que les propriétés "-moz-","-ms-","webkit" sont toutes fonctionnelles sur tout les navigateurs. Et je suis pas sûr qu'un code écrit comme celà fonctionne.

Avez vous essayer sur un seul et unique navigateur votre code fonctionne?

[Gab89]

Oui j'ai essayé sur Google Chrome et sur Mozilla Firefox et cela fonctionne mais je n'arrive pas à trouver la bonne syntaxe pour utiliser ces propriétés dans une fonction jquery, à savoir je réalise un lecteur audio platine vinyle basé sur le plugin jplayer, et je voudrai ajouter des interactions avec la platine, comme le mouvement du plateau, bouton play/pause arrêtant la rotation du plateau, et le contrôle de la vitesse de lecture.

J'espère que quelqu'un pourra m'apporter une solution.

[SpaceFrog]

c'est à mon avis le -= placé à l'endroit ou il est qui psoe sous et n'est pas interprété.

tiens un site qui propose un patch http://www.zachstronaut.com/posts/20...ate-scale.html


sinon le rotate est relatif, donbc a priori pas besoin de faire -=

essaye juste:

Code :

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

1
2
3
4
5
6
$(".plateau-rotation").animate({
"-moz-transform":"rotate(0.59deg)",
"-moz-transform":"rotate(0.59deg)",
"-ms-transform":"rotate(0.59deg)",
"transform":"rotate(0.59deg)"
}, 3);

[Gab89]

Merci beaucoup j'ai finalement utilisé le Plug-in proposé par le site, et cela fonctionne parfaitement.

Il me reste à attaquer la gestion et l’arrêt de la rotation. Merci à tous