Background Position en Jquery sur un div à la vertical [Résolu]

Messages postés
260
Date d'inscription
samedi 26 novembre 2005
Statut
Membre
Dernière intervention
28 septembre 2011
- - Dernière réponse : Dacobah
Messages postés
260
Date d'inscription
samedi 26 novembre 2005
Statut
Membre
Dernière intervention
28 septembre 2011
- 31 déc. 2010 à 00:16
Bonjour à tous !

J'aimerais faire une petite animation avec le fond d'un div qui bouge quand la page se charge.

Alors pour le déplacement horizontal, pas de soucis ça marche.

Mais pour le déplacement vertical, aïe ! Ça coince :o

Voici ce que j'ai fait pour le déplacement vers la droite :


    Lorem Ipsum



$("#conteneur").animate(
    {backgroundPosition:("500px 0")},
    {duration: 1500}
);


CSS
#conteneur{
    background: #111 url("http://tinyurl.com/28fvq8l") no-repeat 0 0;
    height: 500px;
    color: #fff;
    padding: 10px;
}


Pour le déplacement vers le bas, je pensais qu'il faudrait juste mettre dans la partie de mon Javascript : backgroundPosition:("0 500px")

Mais là plus rien ne bouge ?!

J'ai mis mon code à cette page pour vous aider à tester : http://jsfiddle.net/DRg5E/4/

Merci d'avance de vos réponses !
Afficher la suite 

4 réponses

Meilleure réponse
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
9
3
Merci
Bonjour,
pas sur que cela soit permis avec jQuery et la méthode animate, l'essai à partir de ta page le montre.
Tu peux toujours le réaliser à la main comme ceci
var iInc   = 1;    // increment du deplacement
var iPosX  = 0;    // position en X
var iPosY  = 0;    // position en Y
var iMax   = 150;  // deplacement maxi
//-- lancement de la fonction de deplacement
var iTimer = setInterval(function (){
  //-- incremente position
  iPosX = iPosY += iInc;
  //-- stoppe si position atteinte
  if( iPosX > iMax) {       
    clearInterval( iTimer);
  }
  //-- new position
  else{
    $("#conteneur").css("background-position", iPosX + "px " + iPosY + "px");
  }
}, 50);

sur ce coup là si jQuery n'est utilisé que pour cela c'est dommage de l'utiliser.

;O)

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 131 internautes nous ont dit merci ce mois-ci

Commenter la réponse de PetoleTeam
Messages postés
260
Date d'inscription
samedi 26 novembre 2005
Statut
Membre
Dernière intervention
28 septembre 2011
0
Merci
Chouette, c'est exactement ce que je cherchais à faire !

En effet l'idée de passer par un timer avec du setinterval ne m'était pas venu à l'esprit, sans doute car je m'entêtais avec la fonction animate.

Bref, merci beaucoup PetoleTeam ! J'espère que ta réponse pourra également aider d'autres personnes qui cherchent à faire plus ou moins la même chose.
Commenter la réponse de Dacobah
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
9
0
Merci
tout compte fait c'est réalisable en "pur" jQuery, à condition de rajouter un petit plugin.

la page de test jQuery: Background-Position Animation Plugin
et le plugin à intégrer plugin de Alexander Farkas

;O)
Commenter la réponse de PetoleTeam
Messages postés
260
Date d'inscription
samedi 26 novembre 2005
Statut
Membre
Dernière intervention
28 septembre 2011
0
Merci
Oui effectivement ça marche aussi
Merci encore !
Commenter la réponse de Dacobah