11550 sujets

JavaScript, DOM et API Web HTML5

Temporalité setTimeOut

Bonjour à tous ^^
Je m'arrache les cheveux (non ça ne se voit pas encore) sur une méthode JS depuis un certain temps.
Le code étant pas ma tasse de thé, j'ai beau lire et relire de la doc sur ce qui m'intéresse, ce que je veux créer ne fonctionne pas, d'où ma question auprès de gens plus calés que moi (en même temps c'est pas bien difficile Smiley lol ).
Je vous explique.
J'ai creer sur une page html, une illustration découpée en plusieurs carrés qui, quand on passe la souris dessus révèle grâce au JS une autre image.
Jusque là tout fonctionne nickel, pas de problème.
Le soucis c'est que ce n'est pas réellement explicite pour un éventuel visiteur d'où mon problème.
Je souhaite soit au chargement de la page ou alors de temps en temps qu'une des images se révèle toute seule pour inciter le visiteur à passer la souris sur l'illustration et découvrir les autres images.
Voilà mon code qui marche trés bien:
$(function() {
			$('ul.hover_block li').hover(function(){
				$(this).find('img').animate({left:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
			});
			$('ul.hover_block2 li').hover(function(){
				$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
			});
			$('ul.hover_block3 li').hover(function(){
				$(this).find('img').animate({left:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
			});
		});

et ma fonction que j'ai bidouillée mais qui a coup sur à un gros probleme et que je laisse à votre analyse
function attente(){
$('li#caric1 a').load( function()
 { $(this).find('img').animate({left:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({left:'0px'},{queue:false,duration:500}); 
 } );
 
}

attente();
setTimeOut(function(){attente();},500);

Modifié par Tankred (11 May 2011 - 10:00)
Tu aurais un lien, ou le code HTML ?
Tu pourrais expliquer plus précisément l'effet voulu ? je ne suis pas sûr d'avoir tout saisi.
J'imagine que le framework que tu utilises est Jquery.
Beh je bosse encore en local donc voilà ma version test.
(oui j'utilise le JQuery)
Comme tu le verras, quand tu passes ta sourie sur les carrés, il devoile une autre image (bon là un fond noir).
Jusque là, ca marche correctement, pas de soucis.
Le problème c'est que, le visiteur quand il va venir sur ma page, il va voir mon illustration mais ce ne sera pas explicitement dit qu'il peut passer la sourie sur le dessin et découvrir les images sauf de le dire dans un petit texte.
Pour éviter cette solution, je cherche à faire apparaitre une image au chargement ou marcher l'animation jquery, histoire de que le visiteur voit que ya des trucs cachés sous le dessin.
L'animation fonctionnerait de temps en temps toute seule pour montrer que y'a quelque chose à voir quoi.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title></title>
  <script type="text/javascript" src="www/js/jquery-1.4.2.min.js" ></script>
  <script type="text/javascript"> $(function() {
			$('ul.hover_block li').hover(function(){
				$(this).find('img').animate({left:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
			});
			$('ul.hover_block2 li').hover(function(){
				$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
			});
			$('ul.hover_block3 li').hover(function(){
				$(this).find('img').animate({left:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
			});
			$('ul.hover_block4 li').hover(function(){
				$(this).find('img').animate({left:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
			});
			$('ul.hover_block5 li').hover(function(){
				$(this).find('img').animate({left:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
			});
		});
	</script>
	<style type="text/css">
	ul.hover_block li, ul.hover_block2 li, ul.hover_block3 li, ul.hover_block4 li, ul.hover_block5 li{
			list-style:none;
			float:left;
			background: #fff;
			width:100px;
			margin-left: 0px;
			margin-right: 1px; }
		
		ul.hover_block li a, ul.hover_block2 li a, ul.hover_block3 li a, ul.hover_block4 li a, ul.hover_block5 li a {
			display: block;
			position: relative;
			overflow: hidden;
			padding: 16px;
			color: #000;
			font: 1.6em/1.3 Helvetica, Arial, sans-serif;
			background-color: lime;
		
		}

		ul.hover_block li a, ul.hover_block2 li a, ul.hover_block3 li a, ul.hover_block4 li a, ul.hover_block5 li a { text-decoration: none;
		height: 68px;
		width: 68px;
		background-color: black;
	
		}
		
		ul.hover_block li img, ul.hover_block2 li img, ul.hover_block3 li img, ul.hover_block4 li img, ul.hover_block5 li img{
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
			height: 100px;
			width: 100px; 
			background-color: black;
		}
		#anim {
		height: 295px;
		width: 850px;
		display: block;
		margin-left: 0px;
		padding: 0px;
		}
			</style>
</head>

<body>
<div id="anim">
<ul class="hover_block">
			<li id="caric1"><a href="#"><img src="www/images/silhouette/1.jpg" alt="alt" /></a></li>
			<li id="julien"><a href="#"><img src="www/images/silhouette/2.jpg" alt="alt" /></a></li>
			<li id="prout"><a href="#"><img src="www/images/silhouette/3.jpg" alt="alt" /></a></li>
			<li id="caric2"><a href="#"><img src="www/images/silhouette/4.jpg" alt="alt" /></a></li>
			<li id="pierre"><a href="#"><img src="www/images/silhouette/5.jpg" alt="alt" /></a></li>
			<li id="caric10"><a href="#"><img src="www/images/silhouette/6.jpg" alt="alt" /></a></li>
			<li id="seb"><a href="#"><img src="www/images/silhouette/7.jpg" alt="alt" /></a></li>
			<li id="caric3"><a href="#"><img src="www/images/silhouette/8.jpg" alt="alt" /></a></li>

</ul>
<ul class="hover_block2">
			<li id="celes"><a href="#"><img src="www/images/silhouette/9.jpg" alt="alt" /></a></li>
			<li id="prout"><a href="#"><img src="www/images/silhouette/10.jpg" alt="alt" /></a></li>
			<li id="caric4"><a href="#"><img src="www/images/silhouette/11.jpg" alt="alt" /></a></li>
			<li id="juliend"><a href="#"><img src="www/images/silhouette/12.jpg" alt="alt" /></a></li>
			<li id="caric8"><a href="#"><img src="www/images/silhouette/13.jpg" alt="alt" /></a></li>
			<li id="caric5"><a href="#"><img src="www/images/silhouette/14.jpg" alt="alt" /></a></li>
			<li id="prout"><a href="#"><img src="www/images/silhouette/15.jpg" alt="alt" /></a></li>
			<li id="flore"><a href="#"><img src="www/images/silhouette/16.jpg" alt="alt" /></a></li>

</ul>
<ul class="hover_block3">
			<li id="caric6"><a href="#"><img src="www/images/silhouette/17.jpg" alt="alt" /></a></li>
			<li id="sylvain"><a href="#"><img src="www/images/silhouette/18.jpg" alt="alt" /></a></li>
			<li id="coralie"><a href="#"><img src="www/images/silhouette/19.jpg" alt="alt" /></a></li>
			<li id="caric7"><a href="#"><img src="www/images/silhouette/20.jpg" alt="alt" /></a></li>
			<li id="romain"><a href="#"><img src="www/images/silhouette/21.jpg" alt="alt" /></a></li>
			<li id="prout"><a href="#"><img src="www/images/silhouette/22.jpg" alt="alt" /></a></li>
			<li id="jc"><a href="#"><img src="www/images/silhouette/23.jpg" alt="alt" /></a></li>
			<li id="caric9"><a href="#"><img src="www/images/silhouette/24.jpg" alt="alt" /></a></li>

</ul>
<ul class="hover_block4">
			<li id="caric6"><a href="#"><img src="www/images/silhouette/17.jpg" alt="alt" /></a></li>
			<li id="sylvain"><a href="#"><img src="www/images/silhouette/18.jpg" alt="alt" /></a></li>
			<li id="coralie"><a href="#"><img src="www/images/silhouette/19.jpg" alt="alt" /></a></li>
			<li id="caric7"><a href="#"><img src="www/images/silhouette/20.jpg" alt="alt" /></a></li>
			<li id="romain"><a href="#"><img src="www/images/silhouette/21.jpg" alt="alt" /></a></li>
			<li id="prout"><a href="#"><img src="www/images/silhouette/22.jpg" alt="alt" /></a></li>
			<li id="jc"><a href="#"><img src="www/images/silhouette/23.jpg" alt="alt" /></a></li>
			<li id="caric9"><a href="#"><img src="www/images/silhouette/24.jpg" alt="alt" /></a></li>

</ul>
<ul class="hover_block5">
			<li id="caric6"><a href="#"><img src="www/images/silhouette/17.jpg" alt="alt" /></a></li>
			<li id="sylvain"><a href="#"><img src="www/images/silhouette/18.jpg" alt="alt" /></a></li>
			<li id="coralie"><a href="#"><img src="www/images/silhouette/19.jpg" alt="alt" /></a></li>
			<li id="caric7"><a href="#"><img src="www/images/silhouette/20.jpg" alt="alt" /></a></li>
			<li id="romain"><a href="#"><img src="www/images/silhouette/21.jpg" alt="alt" /></a></li>
			<li id="prout"><a href="#"><img src="www/images/silhouette/22.jpg" alt="alt" /></a></li>
			<li id="jc"><a href="#"><img src="www/images/silhouette/23.jpg" alt="alt" /></a></li>
			<li id="caric9"><a href="#"><img src="www/images/silhouette/24.jpg" alt="alt" /></a></li>

</ul>
</div>
</body>
</html>
Le nom de la fonction c'est setTimeout et non setTimeOut.

Sinon, en faisant setTimeout(attente, 500);, ça devrait fonctionner aussi.
Sujet clos
Aller à