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

Dacobah 260 Messages postés samedi 26 novembre 2005Date d'inscription 28 septembre 2011 Dernière intervention - 30 déc. 2010 à 16:20 - Dernière réponse : Dacobah 260 Messages postés samedi 26 novembre 2005Date d'inscription 28 septembre 2011 Dernière intervention
- 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 

Votre réponse

4 réponses

PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 30 déc. 2010 à 19:03
+3
Utile
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)
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de PetoleTeam
Dacobah 260 Messages postés samedi 26 novembre 2005Date d'inscription 28 septembre 2011 Dernière intervention - 30 déc. 2010 à 21:09
0
Utile
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
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 30 déc. 2010 à 21:24
0
Utile
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
Dacobah 260 Messages postés samedi 26 novembre 2005Date d'inscription 28 septembre 2011 Dernière intervention - 31 déc. 2010 à 00:16
0
Utile
Oui effectivement ça marche aussi
Merci encore !
Commenter la réponse de Dacobah

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.