Jquery .rotate

Hello !

Apparemment le plugin fonctionne correctement. La fonction n'ajoute pas 45° à la valeur de ton image mais va le tourner de 45° par rapport à sa valeur initiale. C'est pour cela que ton clique semble fonctionner qu'une fois.

Selon la doc du plugin tu peux tester la valeur de rotation d'un objet : .getRotateAngle(). Du coup tu peux savoir quelle valeur d'angle à soumettre.

A+

Merci de ta réponse Oken.

Mais lorsque j'essaie GetRotateAngle, c'est encore pire.

L'animation se fait, le + tourne de 45° mais tout de suite après, il revient à 0.
Et encore une fois, ça ne semble marcher qu'une seule fois (comme tu l'as expliqué sauf que là, il revient à 0 donc ça devrait marcher à chaque clic).

<script>
$(document).ready(function(){
	
	$('#lien1').click(function() {
		$('#recette1').slideToggle('slow');
		$('#plus1').rotateAnimation({
        angle: 45, 
        bind: {
            click : function(){
               $(this).getRotateAngle();
            	}
        	}
		});
	});
});
</script>

Je ne comprends pas pourquoi c'est si compliqué de rajouter 45° à chaque clique, en tout cas, je ne sais pas l'écrire par moi-même

C'est PARFAIT Mathieu 1004 !!

http://dev.african-essentials.ca/www/conseils-beaute-afrique-essentielle.php

Maintenant, j'aimerais comprendre le script :

$(document).ready(function(){ ----- Quand le document a fini de se charger
var angle=45; ----- Vous définissez une variable qui s'appelle angle et qui vaut 45

$('#lien1').click(function() { ----- Lors que l'on clique sur #lien1
$('#recette1').slideToggle('slow'); ----- #recette1 fait un slidetoggle
$('#plus1').rotateAnimation(angle); ----- #plus1 fait une rotation grâce à la variable "angle"
(angle+=45)%90; ----- Là, je comprends rien
});
});
</script>

Ok, je pense que je ne suis pas sur le bon plugin jQuery, car je ne trouve pas la méthode .rotateAnimation() dans la documentation. Désolé c'est ma faute.

Par contre avec le plugin que je t'ai indiqué, tu devrais essayer ce bout code :

var value = 0
$("#lien1").rotate({ 
   bind: 
     { 
        click: function(){
            value +=45;
            $("#plus1").rotate({ animateTo:value});
            $('#recette1').slideToggle('slow');
        }
     }  
});

Ou m'indiquer quel plugin tu utilise.

Alors pour optimiser, ça va être un peu plus galère car il y a plein de truc à gérer en même temps.
Le slideToggle du bon élément, le rotateAnimation du bon autre élément, et je ne sais pas encore pour l'angle pour chacun ou pas ( dans le principe j'aurai dis que oui mais bon ^^ )

Rapidement le principe ^^ :
En gros la première étape on va récupérer tous les liens, et tous les spans ( et dans l'absolu tous les p qui sont en display:none, mais pour cela il faudrait remplacer le style en ligne par une classe ca sera bien plus simple^^ )
Vu qu'il n'y a pas de classe particulière je passe via l'arborescence.

var lesliens = $('article p a'); //on récupère les liens
//var lesspans = $('article p span');//on récupère les spans (en considérant que tu vas aussi mettre des spans sur toutes les images, pas que les 3 premiers)
//var lespcaches =$('article .cache'); // je considère que tu as mis une classe .cache dans le css au lieu du style en ligne)

var nblien=lesliens.size(); //on récupère le nombre de lien
var angle=new Array(nblien+1);//on crée un tableau d'angle pour chaque élément ( je rajoute 1 car on utilise pas la case 0 avec tes identifiants)
for (i = 0; i <= nblien; i++){  // J'initialise les valeurs des angles a 45 pour chaque case ( désolé je ne sais pas instancier et initier en même temps en javascript .. )
angle[ i]=45; //hop je rajoute un espace entre [ et i] sinon le forum interprète une balise d'italique ...
}
//lorsque l'on clique sur un des liens
lesliens.click(function(){
	var LienNumero=$(this).attr('id').charAt(4);  // la seule chose que l'on peut récupérer c'est l'identifiant, du coup je m'en sers pour avoir le numéro du lien que l'on a cliqué, on va s'en servir pour toggle les bons éléments. (id='lienX'-> On récupère la 5e lettre avec charAt(4))

$('#recette'+LienNumero).slideToggle('slow');
$('#plus'+LienNumero).rotateAnimation(angle[LienNumero]);
(angle[LienNumero]+=45)%90;
 });

Bon après j'ai tester vite fait via firebug, mais j'entre en conflit avec les scripts que tu as mis sur tes 3 premier éléments du coup ça me fait des effets bizarres, mais normalement, ça marche... et j'ai l'impression que le code source change en cours de route par moment ( les spans notamment qui étaient que sur 3 sont sur tous je crois maintenant)
j’espère que les commentaires sont assez claires

Edit : Bon en fait en faisant le code les spans et lespcaches servent pas finalement du coup je les commentes, mais au lieu de faire $('#recette'+LienNumero) par exemple on aurait sélectionner le LienNumero_ieme span pour éviter les ids numéroté.
Modifié par mathieu1004 (29 Jan 2014 - 14:38)

Personnellement j'utiliserais des class en les ajoutant là ou il y a les id.

<p>
<img id="plus4" class="marges plus" ...>
<a id="lien4" class="lien">...</a>
</p>
<p id="recette4" class="recette">...</p>

	var angle = 45;
	$('.lien').click(function () {
	    $(this).parent().next(".recette").slideToggle('slow');
	    $(this).parent().find(".plus").rotateAnimation(angle);
	    (angle += 45) % 90;
	});

Salut,
je pense qu'avec ta solution, il risque d'y avoir des bugs vis à vis de la variable angle.
Par exemple si tu clique sur le 1er lien, ça va faire tourner le + et mettre l'angle à 0. Du coup si tu cliques sur le 2e lien + ne va pas tourner.

Vu que la fonction getRotateAngle() ne fonctionne pas, je ne pense pas que l'on puisse se passer du tableau d'angle (1 pour chaque lien).

Ha oui, c'est pas faux. Sauf si le client clique dans la bonne séquence.

Effectivement le tableau d'angle est indispensable.

Merci à tous les 2 en tout cas.

Effectivement, ça complexifie énormément le code.

Je pensais que ce serait plus simple. je vais essauyer quand même.

Merci en tout cas.

Non ça change pas grand chose, et au final ça simplifie le jour où tu changeras un truc.
Avant 7 variables angles, la un tableau de 7 cases, c'est kif kif ( faut l'initialiser mais c'est pas une grosse difficulté.

Et pour le reste c'est presque le même code au final, mais une seule fois. Avant tu en ciblais un de manière précise, la maintenant celui qu'on clique s'appelle 'this' et il faut juste trouver une méthode pour déterminer qui c'est ce this pour savoir qui on va faire changer.

Sur ma méthode je récupère le numéro de l'id pour savoir qui c'est, et ensuite je me sers du numéro pour déterminer ce qu'on va faire changer ( parce qu'ils ont le même numéro au final).

Sur la méthode de Oken, il trouve les gens à modifier sans déterminer le numéro. globalement il utilise la logique de ta construction pour accéder aux éléments à coté qui sont les éléments à changé au final.

Au final j'aurai tendance à préférer ma méthode parce que dans ton cas il y a besoin du tableau d'angle pour gérer quel élément on a fait tourner, et donc d'un numéro pour chaque cas.
Cependant , je pense que mettre en place un système de classe 'lien' sur tes liens (comme il recommande) serait judicieux par rapport au 'article p a' que j'ai utilisé (car il n'y avait pas de classe ^^ ) qui ne sera pas nécessairement unique sur le site...