Pb de jQuery au survol (".animate({width: 'toggle'})")...

Bonjour,


Je travaille actuellement à la finalisation de mon prochain site pro, et j'ai un problème assez étrange, que je n'arrive pas à comprendre/résoudre.

Sur cette page (mon testeur), vous remarquerez donc qu'au survol d'un article, un cartouche contenant les infos (titre) de celui-ci se déroule, horizontalement.

A l'origine ce comportement de survol fonctionnait sans souci, lorsqu'il ne s'appliquait que sur le petit "+" en bas à droite... Mais maintenant que j'ai voulu l'étendre à tout l'article, et pour une raison que j'ignore, le script semble bugger : si vous passez de la zone 'image' à la zone du "+", ou pire si vous survolez ledit cartouche... eh bien l'animation de déroulement du cartouche devient un peu "folle"... !

J'ai pourtant vérifié mon code, qui semble bon :

$(document).ready(function(){
// Affichage infos articles
	$('section#content article hgroup').hide();
	$('article').mouseover(function(){
		$(this).find('hgroup').animate({width: 'toggle'});
	}).mouseleave(function(){
		$(this).find('hgroup').animate({width: 'toggle'});
	});
});

Ce stupide détail est je crois le dernier point d'ombre technique avant la mise en ligne possible, donc merci d'avance à celles/ceux qui pourront m'aider !


Modifié par soykje (22 Mar 2013 - 21:52)

Petit indice, ".stop();"...

Bonjour,


Merci pour la réponse. Je viens d'essayer (en local), d'ajouter le stop à la fin de mon anim, mais cela ne semble pas marcher...

Comme ne suis pas expert (et j'utilise donc peut-être mal cette fonction), voici les essais, qui n'ont donc rien donné :

// Affichage infos articles
	$('section#content article hgroup').hide();
	$('article').mouseover(function(){
		$(this).find('hgroup').animate({width: 'toggle'}).stop();
	}).mouseleave(function(){
		$(this).find('hgroup').animate({width: 'toggle'}).stop();
	});

// Affichage infos articles
	$('section#content article hgroup').hide();
	$('article').mouseover(function(){
		$(this).find('hgroup').animate({width: 'toggle'});
	}).stop().mouseleave(function(){
		$(this).find('hgroup').animate({width: 'toggle'});
	}).stop();

J'ai essayé aussi avec le stop uniquement sur le mouseover/mouseleave, mais pareil, cela ne résoud pas le problème...

Re-bonjour,


Mes excuses par avance pour mon impatience, mais je n'arrive pas à trouver de solution à ce problème de rollover, et c'est assez rageant sachant que tout le reste est calé pour la mise en ligne (enfin je crois... )...

Merci donc par avance, aux bonnes âmes qui pourront me tirer de ce pétrin !

[Edit] Un essai que j'aurais sans doute dû faire plus tôt : il semblerait (sauf erreur de ma part), que le problème vienne bien de la fonction .animate({width: 'toggle'});. En changeant de comportement au survol, donc de fonction, j'ai pu voir qu'il n'y avait pas de "saute", comme avec ce animate... Si ça peut mettre quelqu'un sur la voie.
Modifié par soykje (22 Mar 2013 - 21:51)

Bonjour à tous,


Le week-end porte conseil !!!

Alors j'avais déjà à moitié grignoté mon clavier (!), j'ai finalement trouvé, au détour d'un essai que j'aurais sans doute dû faire depuis longtemps, la solution au problème : remplacer le mouseover par mouseenter !

Pas forcément une évidence en soi, mais il semble que "la saute" dans le ciblage, notable au survol, venait de la différence entre le mouseover, et le mouseenter...

Dans tous les cas, problème résolu !