11548 sujets

JavaScript, DOM et API Web HTML5

Problème effet survol jquerry

Bonjour à tous, j'ai suivi un tuto sur grafikart pour avoir une effet de survol lorsque l'on passe la souris sur une image.

Le début de l'animation fonctionne (fond grisé en fadeTo) mais une fois arrivé à la bonne opacité, le fond disparaît alors que la souris se trouve encore sur l'image.

voici mon code js : 

$(function(){
	
	var current = null;
	
	$('#galerie_photo a').mouseover(function(){
		if(current && $(this).index != current.index()){
			current.find('span.effet_bg').fadeOut();
		}
		if (current && $(this).index() == current.index()){
			return null;
		}
		$(this).find('span.effet_bg').hide().fadeTo(500,0.7);
		current = $(this);
	});
	
});


et voici le code php : 

		echo '
				<a href="img/big_'.$row['zbeu_images_nom'].'" rel="lightbox[bk]" >
					<span class="effet_bg"></span>
					<span class="effet_titre">'.$row['zbeu_images_titre'].'</span>
					<img src="img/'.$row['zbeu_images_nom'].'" width="241" height="262" />		
				</a>';


une idée ?

Merci d'avance !
Modifié par TiKi__FloO (22 Jun 2012 - 18:02)
TiKi__FloO a écrit :
le fond disparaît alors que la souris se trouve encore sur l'image.

C'est tout à fait normal car tu fais un .hide(), qui signifier cacher.

Par contre, je ne comprends pas l'utilité de "current" ?

Pourquoi ne pas décomposer ton animation en "mouseover" et "mouseout" ?

Peux-tu détailler un peu plus ce que tu désires faire en tant qu'animation ?
tournikoti a écrit :

C'est tout à fait normal car tu fais un .hide(), qui signifier cacher.


En fait il y a le fond noir qui apparaît en hover sur les lien, donc il faut le cacher avant de le faire apparaître progressivement avec fadeTo.

L'effet que je veux est simple, lorsque l'on passe la souris sur une image, je veux que le fond noir apparaisse progressivement et qu'il s'enlève lorsque la souris n'est plus sur l'image.

Le problème c'est qu'il apparaît et qu'il disparaît alors que la souris est encore sur l'image.

En ce qui concerne mouseout, j'ai essayé mais sans résultat.
Bonjour,

Avec la fonction .hover(), tu peux gérer quel animation a lieu au survol, et lorsque la souris quitte l'élément:


$('#galerie_photo a').hover(function() {
	// Le fond noir apparait progessivement
        $(this).find('span.effet_bg').hide().fadeTo(500,0.7);
}, function() {
	// Le fond noir disparait
        $(this).find('span.effet_bg').fadeOut();
});


Et tu devras penser à arrêter tes animations pour pas qu'elle disjoncte quand on les survoles trop rapidement:
http://www.elijahmanor.com/2012/02/find-jquery-bug-4-animations-gone-wild.html
Modifié par Vaxilart (22 Jun 2012 - 21:17)
Sujet clos
Aller à