Animation Jquery

Bonsoir à tous,

Voila je fais un book en ligne et mon menu est composé de trois images (et leurs ombres) qui s'anime au survol de la souris. Le problème c'est que l'animation ne fonctionne qu'une fois et j'aimerais qu'elle se répète à chaque fois que l'utilisateur passe la souris sur l'image. De ce que j'ai lu il faudrait un mouseover mais j'ai vu plusieurs versions qui se contredises et je sais pas quoi en penser.
Je vois le HTML et CSS depuis 1 mois mais je suis vraiment perdu avec Jquery.

Voici le site ou j'ai pris l'animation (BounceIn)
https://daneden.me/animate/

Et mon code HTML:

$('#bombe1').hover(function(){
		$(this).addClass('animated bounceIn');
		$("#ombre1").addClass('animated bounceIn');
	});

	$('#bombe2').hover(function(){
		$(this).addClass('animated bounceIn');
		$("#ombre2").addClass('animated bounceIn');
	});
	
	$('#bombe3').hover(function(){
		$(this).addClass('animated bounceIn');
		$("#ombre3").addClass('animated bounceIn');
	});
	
		$('#bombenav1').hover(function(){
		$(this).addClass('animated bounceIn');
	});
	
		$('#bombenav2').hover(function(){
		$(this).addClass('animated bounceIn');
	});
	
			$('#bombenav3').hover(function(){
		$(this).addClass('animated bounceIn');
	});
	
		$('#bombenav4').hover(function(){
		$(this).addClass('animated bounceIn');
	});

Une âme charitable pour m'aider ?

Merci
Modifié par 6l20 (25 Oct 2013 - 19:05)

Et si tu fais ça ?

$('#bombe1').hover(function(){
$(this).removeClass('animated bouceIn').addClass('animated bounceIn');
$("#ombre1").removeClass('animated bouceIn').addClass('animated bounceIn');
});

En effet, l'animation est déclenchée lorsque l'objet reçoit la nouvelle classe, donc, en la supprimant puis la rajoutant, ça pourrait le faire...
Modifié par petibato (24 Oct 2013 - 13:33)

Non plus, l'animation ne se lance qu'une fois.

Salut,

Bout de code trouver sur la page du plugin.

	function testAnim(x) {
		$('#animateTest').removeClass().addClass(x + ' animated');
		var wait = window.setTimeout( function(){
			$('#animateTest').removeClass()},
			1300
		);
	}

soit un truc comme cela :

$('#bombe1').hover(function(){
    $("#ombre1").removeClass('animated bouceIn').addClass('animated bounceIn');
    var wait = window.setTimeout( function(){
        $(this).removeClass('animated bouceIn').addClass('animated bounceIn');
    },
    1300
    );
});

En copiant/collant ton code mon animation ne se lance plus du tout Je suis vraiment perdu la

Et ça ?

$('#bombe1').hover(
    function() {$(this).addClass('animated bounceIn');$("#ombre1").addClass('animated bounceIn');},
    function() {$(this).removeClass('animated bounceIn');$("#ombre1").removeClass('animated bounceIn');});

L'idée, c'est de mettre les classes sur le mouseenter, et de les enlever sur le mouseleave.
Modifié par petibato (24 Oct 2013 - 23:28)

ça marche ! Mais ça bug un peu.
Je m'explique, l'animation se repète mais marche très bien que si je met le curseur de la souris pile au milieu de l'image, sur le coté l'image clignote plusieurs fois
Modifié par Belirophon (25 Oct 2013 - 00:50)

Ah ouais, ça clignote sur les événements mouseenter/mouseleave à cause de l'animation. Tu pourrais, par exemple, mettre l'objet à animer dans une div, et placer le hover() sur cette div plutôt que sur l'objet.

La par contre j'ai pas compris petitbato [

On peut gérer l'animation jQuery en CSS ?

Je ne sais trop ce qu'il y a dans ton HTML, mais voici un exemple :

HTML :

<div id="bombe1">
<p>Hello</p>
<p>World</p>
</div>
<br />
<div id="bombe2">
<p>Hello</p>
<p>World</p>
</div>

JS :

$('#bombe1').hover(function() {$(this).addClass('animated bounceIn');},function() {$(this).removeClass('animated bounceIn');});
$('#bombe2').hover(function() {$(this).children().addClass('animated bounceIn');},function() {$(this).children().removeClass('animated bounceIn');});

Dans le cas "bombe1", l'animation est appliquée à la div, dans le cas "bombe2", l'animation est appliquée à chaque paragraphe de la div.

mon code HTML pour mes bombes, textes et ombres:

<!-- bombes écran menu-->
	<div id="menu-principal">
	<div class="wrapper">
	<div id="bombe1">
	<a href="#bombeportfolio"><img src="css/img/petitebombeaccueil.png" alt=""></a></div>
	<div id="bombe2">
	<a href="#page-galerie"><img src="css/img/petitebombecreativite.png" alt=""></a></div>
	<div id="bombe3">
	<a href="#page-contact"><img src="css/img/petitebombecontact.png" alt=""></a></div>
	</div>

	<!-- fin bombes écran menu-->
	
	<!-- texte menu-->
	<div class="wrapper">
	<p><div id="texte1" class="clear">Accueil</div></p>
	<p><div id="texte2">Projets</div></p>
	<p><div id="texte3">Contact</div></p>
	</div>
	<!-- fin texte menu-->
	
	<!-- ombre bombe-->
	<div class="wrapper">
	<div id="ombre1"></div>
	<div id="ombre2"></div>
	<div id="ombre3"></div>
	</div>
	</div>
	<!-- fin ombre bombe-->

Modifié par 6l20 (25 Oct 2013 - 19:07)

@Belirophon Peut-tu éditer tes messages et insérer la balise [code] pour l'affichage avec colorisation.

benj a écrit :
@Belirophon Peut-tu éditer tes messages et insérer la balise [ code] pour l'affichage avec colorisation.

D'accord

aurais tu un exemple en live de façon à voir de quelle façon sont placée tes div ?