Background Position en Jquery sur un div à la verticalRésolu

Question

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 !

PetoleTeam · Accepted Answer

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)

Dacobah · Answer

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.

PetoleTeam · Answer

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)

Dacobah · Answer

Oui effectivement ça marche aussi 
Merci encore !

Background Position en Jquery sur un div à la vertical

4 réponses

Votre réponse

Discussions similaires