bonjour
j'ai suivi le tutoriel d'effet de survol ça marche super bien merci ce tutoriel :), je débute en javascript et en jquery je travail sur un site que j'avance doucement voila le lien c.com (j'accepte les critiques :) ) je veux ameliorer l'animation, je veux que non seulement lors de survol sur les carreau qui anime mais même lorsque on survol sur les lien des menu les carreau animent aussi le menu contient les même élément que les carreau
voici le code html
<body >
<!-- menu -->
<div id="bar-top">
<ul id="liste">
<li><a href="#">Accueil</a></li>
<li><a href="apropos.php" rel="license" onclick="javascript:return(false)"
class="lightbox" style="cursor:pointer;">A propos</a></li>
<li><a href="#">Entreprise</a></li>
<li><a href="#">Congres</a></li>
<li><a href="#">Web</a></li>
<li><a href="#">Entreprise</a></li>
<li><a href="#">Actualités</a></li>
<li><a href="references.php">Références</a></li>
<li><a href="contact.php" rel="license" onclick="javascript:return(false)"
class="lightbox" style="cursor:pointer;">Contact</a></li>
</ul>
</div>
<div id="container" style="margin-top:60px;">
<div class="logo"> <img src="images/logo.png" alt="logo"> </div>
<div id="container2" >
<div class="grille">
<a href="apropos.php" rel="license" onclick="javascript:return(false)"
class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
<span class="title" >A propos de C.COM</span>
<span class="disc">sous titre </span>
<span class="bg"><img id="image1" src="images/1.JPG"></span>
<img src="logo/1.png" ></a>
<a href="pages/test.php" rel="license" onclick="javascript:return(false)"
class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
<span class="title" >CONGRES C.COM</span>
<span class="disc">sous titre </span>
<span class="bg"><img id="image1" src="images/2.JPG"></span>
<img src="logo/3.png" ></a>
<a href="pages/test.php" rel="license" onclick="javascript:return(false)"
class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
<span class="title" >CONGRES C.COM</span>
<span class="disc">sous titre </span>
<span class="bg"><img id="image1" src="images/3.JPG"></span>
<img src="logo/5.png" >
</a>
<a href="references.php" style="margin-right:15px;margin-bottom:15px;">
<span class="title" >REFERENCES C.COM</span>
<span class="disc">sous titre </span>
<span class="bg"><img id="image1" src="images/4.JPG"></span>
<img src="logo/7.png" ></a>
<a href="pages/test.php" rel="license" onclick="javascript:return(false)"
class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
<span class="title" >CONGRES C.COM</span>
<span class="disc">sous titre </span>
<span class="bg"><img id="image1" src="images/5.JPG"></span>
<img src="logo/9.png" ></a>
<a href="pages/test.php" rel="license" onclick="javascript:return(false)"
class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
<span class="title" >CONGRES C.COM</span>
<span class="disc">sous titre </span>
<span class="bg"><img id="image1" src="images/6.JPG"></span>
<img src="logo/11.png" ></a>
<a href="pages/test.php" rel="license" onclick="javascript:return(false)"
class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
<span class="title" >CONGRES C.COM</span>
<span class="disc">sous titre </span>
<span class="bg"><img id="image1" src="images/4.JPG"></span>
<img src="logo/13.png" ></a>
<a href="pages/test.php" rel="license" onclick="javascript:return(false)"
class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
<span class="title" >CONGRES C.COM</span>
<span class="disc">sous titre </span>
<span class="bg"><img id="image1" src="images/4.JPG"></span>
<img src="logo/15.png" ></a>
<a href="contact.php" rel="license" onclick="javascript:return(false)"
class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
<span class="title" >Contact</span>
<span class="disc">sous titre </span>
<span class="bg"><img id="image1" src="images/4.JPG"></span>
<img src="logo/17.png" ></a>
</div>
</div>
</div>
<div id="bgPopup"></div>
<div id="Popup"><div id="fermer" style=""><img src="images/icones/closebox.png" alt="fermer la fenêtre" title="Fermer la fenêtre" /></div>
<div id="contenu"></div><div id="load"></div></div>
<div id="bandelaterale"></div>
<div id="chapeau"><img src="images/chapeau.png"></div>
</body>
et voici le code javascript :
$(function() {
var current = null;
var t = parseInt($('#container2 a:first span.title').css('top')); // la heuteur de titre.
var l = parseInt($('#container2 a:first span.disc').css('left')); // la largeur de description.
$('#container2 a').mouseover (function(){
if(current && $(this).index() != current.index()){
current.find('span.bg').stop().fadeOut();
current .find('span.title').stop().show().animate({
top:t-50,
opacity:0
});
current .find('span.disc').stop().show().animate({
left:l-50,
opacity:0
});
}
if(current && $(this).index() == current.index()){
return null;
}
$(this).find('span.bg').stop().hide().fadeTo(500,1);
$(this).find('span.title').stop().css({
opacity:0,
top: t+50
}).animate({
opacity:1,
top: t
});
$(this).find('span.disc').stop().css({
opacity:0,
left: l-50
}).animate({
opacity:1,
left: l
});
current = $(this);
});
});
j'aimerai bien la réaliser j'arrive mm pas a commencer, si vous avez des suggestion ou des solutions je serai ravi :)
merci d'avance.