Animer le fond d'un bouton avec jQuery

[Adel1982]

Bonjour tout le monde,

J'espère que vous profitez tous bien de ce temps agréable que nous avons aujourd'hui.

De mon côté Je souhaite réaliser un bouton avec un background animé.

Voici le code HTML de ce bouton :

Code :

1
2
 
<a class="bouton" href="http://www.google.com">google</a>

Voici le code CSS de ce bouton :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.bouton {
    height:77px;
    width:400px;
    display:block;
    cursor:pointer;
    margin: 0 auto;
    background: url(btn.png);
}
.bouton span.hover {
    height:77px;
    width:400px;
    display:block;
    cursor:pointer;
    margin: 0 auto;
    background: url(btn.png) no-repeat left bottom;
}

Voici le code jQuery de ce bouton :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  $(document).ready(function(){
 
                $('.bouton').append('<span class="hover"</span>').each(function(){
 
                    var $anime = $('span.hover', this).css('opacity',0);
 
                    $(this).hover(function(){
                            $anime.stop().fadeTo(800,1);
                    },
 
                    function(){
                            $anime.stop().fadeTo(800,0);
                    });
 
                });
 
        });

Lorsque la balise <a> est vide, l'animation est parfaitement exécuté, cependant lorsque je rajoute du texte, l'animation est décalé par ce dernier vers le bas.
http://imageshack.us/photo/my-images...aptureebn.jpg/

J'ai retourné le problème dans tout les sens et ne parviens pas à faire en sorte que l'animation fonctionne avec du texte centré.

Voila j'espère que vous pourrez me venir en aide.

Bon weekend à toutes et tous.

Amicalement,

Adel

[tominardi]

Pourquoi ajoute tu un span pour simuler le hover ? je ne suis pas sur de comprendre ta technique.

[Bovino]

Ben ça semble plutôt normal... Si ton lien contient du texte, le texte occupe de l'espace, donc quand tu fais le append, vu les dimensions que tu donnes aux éléments, il n'y a pas de place pour mettre le span dans la largeur, donc on passe à la ligne.
Tu vas donc devoir positionner les éléments pour qu'ils se superposent.

[SpaceFrog]

Tu pourrais aussi juste jouer sur la position d'une image en degradé mise en background ?