Discussion :

[Invité]

Bonjour à tous,

Je dois réaliser une animation pour le site web d'un client.
Comme un dessin vaut mieux qu'un long discours...



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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$(document).ready(function() {
    $('li').click(function() {
        $(this).animate({ 
            width: "50px",
            height: "60px"
        }, 500 );
    });
});

[gtraxx]

un lien pour visionner serai un plus pour t'aider.
Mais si tu défini la taille en dehors de l'événement tu aura un meilleur rendu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$(document).ready(function() {
    $("ul#allneed li").click(function() {
       $(this).width("0%").height('0').animate({ width: "50px"}, 1500)
       .animate({ height: "60px" }, 2500);
   });
});

Perso j'aurai écris:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<ul id="allneed">
    <li>
        <a href="#" title="">
            <img src="images/content/produits/need-ultrasonic-leak-detection.png" alt="" />
            <span>Ultrasonic leak detection</span>
        </a>
    </li>
 
    ...

[Invité]

Bonjour,

Merci et désolé pour la réponse tardive. J'ai trouvé la solution à mon problème
entre temps, en fait j'ai donné une font-size de 12px à mon bloc conteneur.
Et la taille des rubriques à l'intérieur sont ensuite définies en "em". Après, je
n'ai plus qu'à modifier le font-size du conteneur dans ma fonction animate pour que tous les éléments s'ajustent en fonction.