Discussion :

[aku84]

Pour connaitre le numéro du childNodes j'ai fait ça:

Pour la div d'id "_13":

Code :

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

1
2
3
4
5
6
7
	var i=0;
	while (document.getElementById("_13").childNodes[i]) {
		if (document.getElementById("_13").childNodes[i].className=="back") {
			alert(i)
		}
		i++;
	}

Par contre récupérer juste l'id je sais pas trop car je connais pas trop les classes multiples et pas du tout jquery...

j'ai essayé de remplacer la boucle dans la fonction par:

Code :

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

this.childNodes[5].style.display="block";

mais je pense pas que ce soit la solution...

[NoSmoking]

Cependant est ce que avec cette solution, le back est en display none si il n'y a pas d'hover.

Car je cherche à le rendre en display: none pour améliorer la fluidité de mon site. Si le back n'est pas en display none alors ca ralentit tout mon site...

je doute que cela soit ce qui ralenti ton site!

Si tu mets le dos en display:none au départ et sur le mouseover en display:block, l'animation n'aura plus de sens sur le mouseout, d'autant que pour préparer la transformation le navigateur à besoin de valeurs et par définition un display:none fait que l'élément vaut ne rien.

[lolo34140]

Malheureusement, c'est bien l'image du .back qui ralentit mon site.
Ça ralenti les animations du plugin jquery isotope. Cela j'en suis sur.

Je suis entrain de regarder pour un plugin flip pour résoudre mon problème

J'en ai trouvé un (https://github.com/lepixel/flippy).

Mais j'ai encore du mal à le faire fonctionner : http://fiddle.jshell.net/52mG7/3/

Celui ci permet bien de masquer le .back et le .front par contre. EN plus il marche avec IE.

[NoSmoking]

si tu passes en fullJS il te faut commencer par virer toutes les propriétés CSS3 de ton code afin de ne pas avoir d'interférence. Repars donc d'un code CSS plus light.

[lolo34140]

Oui c'est bien ce que j'ai fait dans mon fiddle. Il n'y a plus de flip et de transitions...

[dragonno]

Sinon pourquoi pas plutôt récupérer juste l'id de l'élément sur lequel on fait un Hover.

Bonne idée ça !

Pour rappel juste :
Tu récupères juste avec this.id dans le hover.

[lolo34140]

J'ai essayé mais je n'arrive pas à manipuler this.id ...

[lolo34140]

J'arrete pas d'essayer des choses et je suis persuadé que la solution est très simple.

Il ne s'agit que d'un problème de référencement des éléments lors de l'animation.

Par exemple avec ce code :

Code :

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

1
2
3
4
5
6
7
$('.hover').hover(function(){;
$('.back').show(0);
	$(this).addClass('flip');
},function(){
	$(this).removeClass('flip');
	$('.back').hide(500);
});

Tout devient très fluide. Le back devient display:block puis display:none.
Il y a bien le flip.

Seulement si je passe d'une vignette à une autre il y a un problème d'affichage. Le back disparait sur l'élément suivant (ça clignote (display:none;display:block. Plus je survole d'élément plus ça "clignote".


Je pense que la solution existe en peu de lignes...

[dragonno]

Le "id" tu l'envoie en paramètre de la fonction lancée par le over.

Je te le place là mais à toi de le placer au bon endroit :

Code :

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

$('.hover').hover(function(this.id){;

[lolo34140]

J'ai essayé de le placer un peu partout mais plus rien ne marche...
Je vois pas ou le mettre ou comment l'utiliser...

[NoSmoking]

Je te le place là mais à toi de le placer au bon endroit :

Code :

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

$('.hover').hover(function(this.id){;

...c'est sensé faire quoi?

[dragonno]

Rien pour moi, c'est juste pour lui montrer que le this.id doit se placer dans l'évènnement over de l'objet mais je ne connais pas l'écriture Jquery donc je dis de la placer au bon endroit.

J'ai essayé mais je n'arrive pas à manipuler this.id ...

Le "id" tu l'envoie en paramètre de la fonction lancée par le over.
Je te le place là mais à toi de le placer au bon endroit.