Bonjour,
étant nous je me permet une brève présentation. Je suis Yorick, j'ai 26 ans et suis graphiste dans une petite agence de communication basé à Bern en Suisse. Durant mes temps libre je m'adonne à quelques expérimentations web en tout genre.
Dans cette optique, je rencontre de gros problème avec le framwork Jquery sur Firefox (MAC).
Je m'explique, je souhaite faire une mosaïque avec beaucoup d'images. Les images sont en noir blanc et au survol je souhaite faire un fondu vers l'image en couleur ainsi qu'ajouter un petit toggle sur un autre div en couleur qui sera superposé. Cela nous fait donc 2 comportement simultané à gérer, rien de bien gourmand à première vue. Sous safari & chrome tout se passe bien, mais sous firefox, quelle horreur ça lag plus il y a d'image.
Peut-être dois-je optimiser mon code ou simplement abandonner cette technique? (FF3 / FF4 on été testé.) Cela me semble très bizarre d'avoir une telle différence de perfs. Aucun des 2 autres navigateur ne semble avoir la moindre peine à réaliser ces actions.
(sous safari un petit redimensionnement de la fenêtre est nécessaire pour replacer les éléments, je dois corriger encore ce petit bug, mais la n'est pas le problème).
Avez-vous une idée?
Voici le lien pour accéder à l'exemple: http://www.aie-aie-aie.com/play/
HTML d'un élément:
JS de l'animation et ciblage:
Merci d'avance pour votre précieuse aide.
Modifié par yorock (29 Mar 2011 - 11:59)
étant nous je me permet une brève présentation. Je suis Yorick, j'ai 26 ans et suis graphiste dans une petite agence de communication basé à Bern en Suisse. Durant mes temps libre je m'adonne à quelques expérimentations web en tout genre.
Dans cette optique, je rencontre de gros problème avec le framwork Jquery sur Firefox (MAC).
Je m'explique, je souhaite faire une mosaïque avec beaucoup d'images. Les images sont en noir blanc et au survol je souhaite faire un fondu vers l'image en couleur ainsi qu'ajouter un petit toggle sur un autre div en couleur qui sera superposé. Cela nous fait donc 2 comportement simultané à gérer, rien de bien gourmand à première vue. Sous safari & chrome tout se passe bien, mais sous firefox, quelle horreur ça lag plus il y a d'image.
Peut-être dois-je optimiser mon code ou simplement abandonner cette technique? (FF3 / FF4 on été testé.) Cela me semble très bizarre d'avoir une telle différence de perfs. Aucun des 2 autres navigateur ne semble avoir la moindre peine à réaliser ces actions.
(sous safari un petit redimensionnement de la fenêtre est nécessaire pour replacer les éléments, je dois corriger encore ce petit bug, mais la n'est pas le problème).
Avez-vous une idée?
Voici le lien pour accéder à l'exemple: http://www.aie-aie-aie.com/play/
HTML d'un élément:
<div class="work">
<a href="#">
<img src="img/img4.jpg" class="bw" alt="none" />
<img src="img/img4_on.jpg" class="colorImg" alt="none" />
<div class="progress"></div>
</a>
</div>
JS de l'animation et ciblage:
$(".work a").hover(
function (){
$(".progress", this).animate({left:0, width: "toggle"}, 400);
$(".colorImg", this).stop().fadeTo(1000, 1, 'easeOutQuint', function(){
return false;
});
},function(){
$(".progress", this).animate({left:0, width: "toggle"}, 200);
$(".colorImg", this).stop().css('opacity', '0');
}
);Merci d'avance pour votre précieuse aide.
Modifié par yorock (29 Mar 2011 - 11:59)