11548 sujets

JavaScript, DOM et API Web HTML5

Terminer une animation avant qu'une autre ne commence.

Bonjour à toutes et tous,

N'utilisant le javascript (Jquery) que très rarement je bloque sur un problème qui doit être assez basique je pense, je vous l'expose.

Je désire créer un effet au survol d'un lien qui ferais apparaître un div par le biais de la méthode animate.

Pour ce faire je détecte la présence de la souris sur le lien ainsi que le rollout de la souris.
L'animation en elle même fonctionne.

Le problème est que si je survole et arrête de survoler plusieurs fois très vite le lien, l'animation se joue le nombre de fois que j'ai exécuté le rollover et rollout.

Comment pourrais-je faire pour que l'événement roll over et roll out soit désactiver lorsque l'animation ce joue?

Mon code :
	
$(document).ready(function(){
		$(".run").hover(function(){
	 	 	$("#box").animate({opacity: "1", width: "200"}, "slow")
	  		return false;});
		$(".run").mouseout(function(){
			$("#box").animate({opacity: "1", width: "0"}, "slow")
	  		return false;
	  	});
});


Voilà, j'espère avoir été clair.

Merci pour vos futures réponses.

Cordialement, Greg.
Modifié par doncho (28 Apr 2010 - 22:00)
Avec une variable pour controler si les animations sont terminées ou pas :

bAnimateFini=true;
$(document).ready(function(){ 
        $(".run").hover(function(){ 
              if (bAnimateFini == false) {
              bAnimateFini=false;
              $("#box").animate({opacity: "1", width: "200"}, "slow",function(){
                  bAnimateFini=true;
                }) ;
              }
              return false;}); 
        $(".run").mouseout(function(){ 
              if (bAnimateFini == false) {
              bAnimateFini=false;
            $("#box").animate({opacity: "1", width: "0"}, "slow",function(){
                  bAnimateFini=true;
                }) 
              }
            return false; 
          }); 
});
Merci pour ta réponse.

Le code en lui même à l'air fonctionnel mis le problème c'est que lorsque je vais trop vite (je ressort du lien avant que l'anim de roll over soit finie).

Il ne prend pas en compte mon roll out et reste bloqué.

Smiley ohwell
Merci c'est exactement ce que je cherchais ! Simple et efficace.

Bonne fin de soirée à tous. Smiley smile
Rebonjour,

Un autre problème ce présente j'ai donc édité le titre pour continuer sur le même code.
Je vais essayer de m'expliquer le plus clairement possible.

J'ai 4 liens et lorsque je survole un des liens, une animation se joue (juste en dessous) pour faire apparaître le titre du lien.
Le soucis est que lorsque l'on va trop vite avec la souris sur un autre lien, l'animation ne se joue plus correctement et fait ceci :

-Le texte à l'intérieur du rectangle noir est remplacer par celui de l'autre lien survolé sans rejouer l'animation du ce rectangle depuis le départ.


Je vais vous fournir le lien de ma page en ligne :

Ma page test


Ainsi que le code :

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>animate box</title>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.hoverflow.js" type="text/javascript" charset="utf-8"></script>
   	<script type="text/javascript">
   	
$(document).ready(function() {
	$("ul.works_title li").hide();
	
	$(".links_works").mouseenter(function(e) {
			
			var target = $(this).attr('rel'); 
			
			$('#'+target).hoverFlow(e.type, {'opacity': 'show'});
			 
    		$("#box_resultat").hoverFlow(e.type, { width: "500" }, 500 );
     	}); 
     	
     $(".links_works").mouseleave(function(e) {
     	
     		var target = $(this).attr('rel');
     		
			$('#'+target).hoverFlow(e.type, {'opacity': 'hide'});
			
    		$("#box_resultat").hoverFlow(e.type, { width: "0" }, 500 );
  		});
});
 
	</script>
    <style type="text/css" media="screen">
    
 
    
	div#works{
	overflow:auto;
	}
 
  	.links_works{
  	text-decoration: none;
  	display: block;
  	width:50px;
  	height:50px;
  	border:1px solid grey;
  	float:left;
  	margin-left:20px;
  	}
  	
  	#box_resultat {
	background: black;
	height: 100px;
	width: 0px;
	position: absolute;
	}   
	
	ul.works_title li {
	position:absolute;
	top:10px;
	text-transform: uppercase;
	list-style: none;
	width:500px;
	font-size:70px;
	color:white;
	}
	
	
    </style>
 
</head>
<body>
	<div id="works">
		<a class="links_works" href="" rel="1">1</a>
		<a class="links_works" href="" rel="2">2</a>
		<a class="links_works" href="" rel="3">3</a>
		<a class="links_works" href="" rel="4">4</a>
		<a class="links_works" href="" rel="5">5</a>
	</div>
   	<div id="box_resultat">
   		<ul class="works_title">
   			<li id="1">Travail N°1</li>
   			<li id="2">Travail N°2</li>
   			<li id="3">Travail N°3</li>
   			<li id="4">Travail N°4</li>
   			<li id="5">Travail N°5</li>
   		</ul>
   	</div>
    
</body>
 
</html>


Voilà j'espère que l'un de vous saura me débloquer.

Merci par avance.
Rebonjour,

Un autre problème ce présente j'ai donc édité le titre pour continuer sur le même code.
Je vais essayer de m'expliquer le plus clairement possible.

J'ai 4 liens et lorsque je survole un des liens, une animation se joue (juste en dessous) pour faire apparaître le titre du lien.
Le soucis est que lorsque l'on va trop vite avec la souris sur un autre lien, l'animation ne se joue plus correctement et fait ceci :

-Le texte à l'intérieur du rectangle noir est remplacer par celui de l'autre lien survolé sans rejouer l'animation du ce rectangle depuis le départ.


Je vais vous fournir le lien de ma page en ligne :

Ma page test


Ainsi que le code :

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>animate box</title>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.hoverflow.js" type="text/javascript" charset="utf-8"></script>
   	<script type="text/javascript">
   	
$(document).ready(function() {
	$("ul.works_title li").hide();
	
	$(".links_works").mouseenter(function(e) {
			
			var target = $(this).attr('rel'); 
			
			$('#'+target).hoverFlow(e.type, {'opacity': 'show'});
			 
    		$("#box_resultat").hoverFlow(e.type, { width: "500" }, 500 );
     	}); 
     	
     $(".links_works").mouseleave(function(e) {
     	
     		var target = $(this).attr('rel');
     		
			$('#'+target).hoverFlow(e.type, {'opacity': 'hide'});
			
    		$("#box_resultat").hoverFlow(e.type, { width: "0" }, 500 );
  		});
});
 
	</script>
    <style type="text/css" media="screen">
    
 
    
	div#works{
	overflow:auto;
	}
 
  	.links_works{
  	text-decoration: none;
  	display: block;
  	width:50px;
  	height:50px;
  	border:1px solid grey;
  	float:left;
  	margin-left:20px;
  	}
  	
  	#box_resultat {
	background: black;
	height: 100px;
	width: 0px;
	position: absolute;
	}   
	
	ul.works_title li {
	position:absolute;
	top:10px;
	text-transform: uppercase;
	list-style: none;
	width:500px;
	font-size:70px;
	color:white;
	}
	
	
    </style>
 
</head>
<body>
	<div id="works">
		<a class="links_works" href="" rel="1">1</a>
		<a class="links_works" href="" rel="2">2</a>
		<a class="links_works" href="" rel="3">3</a>
		<a class="links_works" href="" rel="4">4</a>
		<a class="links_works" href="" rel="5">5</a>
	</div>
   	<div id="box_resultat">
   		<ul class="works_title">
   			<li id="1">Travail N°1</li>
   			<li id="2">Travail N°2</li>
   			<li id="3">Travail N°3</li>
   			<li id="4">Travail N°4</li>
   			<li id="5">Travail N°5</li>
   		</ul>
   	</div>
    
</body>
 
</html>


Voilà j'espère que l'un de vous saura me débloquer.

Merci par avance.
Sujet clos
Aller à