Animer le fond d'un bouton avec jQuery
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
