Image de background figée

**John Vass** · 18/12/2013, 17h40

Hello !

Pour les besoins d'une animation, je cherche à mettre un image de background en arrière plan sous un png, puis à le faire bouger.

Je suis parvenu à le mettre en place en position 0 avec cette ligne de code :

Code :

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

1
2
 
$("#bg").css({backgroundPosition:"0 0"});

Mais après, quand il s'agit de le faire bouger, bonjour la bavure :

Code :

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

1
2
 
$("#bg").css({backgroundPosition:"0 0"}).animate({ backgroundPositionX:"-2100px 0"},  2500, "linear" );

Ce code ne veut pas marcher, ça affiche l'image de fond, mais ca ne le fait pas bouger ! En fouillant un peu, j'apprend que c'est une histoire de version de jQuery trop récente ! Et je n'arrive pas à trouver la solution au problème.

Que doit-on faire dans ce cas ?

Merci !

**SylvainPV** · 18/12/2013, 18h08

Déjà ce qui n'est pas logique c'est de passer deux valeurs à backgroundPositionX alors que le nom présuppose d'en passer qu'une seule, celle de l'axe X.

Tu as essayé avec backgroundPosition ?

**John Vass** · 18/12/2013, 18h18

Et m... moi qui m'embrouille dans mes X essais mis en commentaires ! ^^

Bon, quelle que soit l'erreur dans mon code précédent , ça ne change rien.

Que ce soit :
backgroundPositionX:-2100;
ou encore :
backgroundPosition:-2100 0;

Ce sera du pareil au même. Aucune translation de l'image de fond.

Note : J'ai choppé un truc appelé jQuery UI 1.10.3 et je l'ai dézippé dans mon dossier de plugins js. Et j'ai bien fait la relation avec le fichier jquery-1.9.1.js qu'il y a dedans. Maintenant, le fait que ça ne marche toujours pas, je trouve ca bizarre !

**SylvainPV** · 18/12/2013, 18h21

jQuery UI c'est une surcouche à jQuery pour rajouter des composants d'interface. Aucun rapport de près ou de loin avec une bête animation.

Et avec ça :

Code :

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

1
2
3
4
5
6
$("#bg").css({
 'background-position-x': '0',
  'background-position-y': '0'
}).animate({
 'background-position-x': '-2100px'
},  2500, "linear" );