Vos avis sur une animation
Bonjour à tous,
Je dois réaliser une animation pour le site web d'un client.
Comme un dessin vaut mieux qu'un long discours...
http://pix.nofrag.com/0/0/0/440995dc...3b9f944315.gif
Voilà, donc j'ai une liste qui contient des liens. Chaque lien est
en "display:block;". Et chacun de ces liens contient un cadre d'image ainsi
qu'un cadre de texte. Le résultat souhaité est le suivant : lors du click sur
un élément de la liste, celui-ci change de couleur et l'ensemble des éléments
se rétrécit (texte et image compris) et viennent se placer dans le menu de
gauche (qui est un div en float:left).
Voilà, j'aimerais savoir comment vous aborderiez le problème ? Je pensais utiliser simplement la fonction animate de jQuery mais ça ne semble
pas fonctionner (une fois rétrécit, mes éléments reprennent leur forme initiale et leur positionnement déconne).
Pour infos, mon code html :
Code:
1
2
3
4
5
6
7
8
9
| <ul>
<li id="need-1" class="">
<a href="#" title="">
<img src="images/content/produits/need-ultrasonic-leak-detection.png" alt="" />
<span>Ultrasonic leak detection</span>
</a>
</li>
... |
et le javascript :
Code:
1
2
3
4
5
6
7
8
9
|
$(document).ready(function() {
$('li').click(function() {
$(this).animate({
width: "50px",
height: "60px"
}, 500 );
});
}); |
