Contenu principal
Animate background-position

jQuery 1.5 et .animate() avec background-position

26 Mar 2011

Depuis la mise à jour de jQuery en version 1.5 (peut-être 1.5.1?), faire un .animate() avec background-position ne fonctionne plus.
Aujourd’hui nous allons voir comment remédier simplement à ce nouveau « bug » grâce à un tout petit plugin.

C’était mieux avant

Avant cette mise à jour, lorsque l’on voulait animer la position d’une image de fond (comme je l’ai fait pour animer mes boutons bleus « sociaux » en bas d’article sur l’ancien design, maintenant c’est en css3), nous faisions par exemple :

1

$("#btn").animate({"background-position" : "0 -30px"});

Maintenant, l’animation ne fonctionne tout simplement plus.

Le pourquoi avant le comment

Vous avez peut-être remarqué que j’ai utilisé les guillemets pour employer le mot « bug », pourquoi? Parce que ce n’est pas un bug, c’est le fonctionnement normal de .animate().
En effet, si l’on regarde la définition de .animate() sur le site de jQuery :

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality.

On y apprend que .animate() est censé animer une valeur numérique, et pas une chaine de caractères « 0 -30px ». Donc en gros, si bug il y a, c’était AVANT cette mise à jour :)

Le comment

Pour solutionner ce problème, il va falloir passer par le plugin cssHooks de Brandon Aaron.
Une fois l’archive téléchargée et décompressée, cherchez le fichier bgpos.min.js (qui pèse seulement 1153 octets) et incluez le dans votre page à la suite de jQuery (ou copiez/collez son contenu directement dans votre fichier javascript) :

12

<script type='text/javascript' src='http://www.mon-site.fr/wp-content/themes/mon-theme/js/jquery-1.5.1.min.js?ver=1.5.1'></script>
<script type='text/javascript' src='http://www.mon-site.fr/wp-content/themes/mon-theme/js/bgpos.min.js?ver=2011.03.03'></script>

Il ne reste plus qu’à modifier la propriété de .animate() :

12345

$("#btn").animate({backgroundPositionX:0});					// Pour animer la position en horizontal
// ou
$("#btn").animate({backgroundPositionY:-30});					// Pour animer la position en vertical
// ou
$("#btn").animate({backgroundPositionX:0,backgroundPositionY:-30});		// Pour animer les 2 en même temps

A voir le contenu de l’archive du plugin, il y a plein d’autres fichiers javascript. Dans mon empressement, je n’ai pas testé le reste, mais je suis sûr qu’il y a plein de bonnes choses à faire avec :)