begin process at 2012 05 29 00:22:18
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

Framework

 > 

Autre Framework

 > 

Background Position en Jquery sur un div à la vertical

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Background Position en Jquery sur un div à la vertical

jeudi 30 décembre 2010 à 16:20:37 | Background Position en Jquery sur un div à la vertical

Dacobah
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 :

Code HTML :
<div id="conteneur">
    Lorem Ipsum
</div>


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


CSS
Code :
#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 : [ Lien ]

Merci d'avance de vos réponses !
jeudi 30 décembre 2010 à 19:03:15 | Re : Background Position en Jquery sur un div à la vertical

PetoleTeam

Membre Club
Réponse acceptée !
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
Code Javascript :
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)
jeudi 30 décembre 2010 à 21:09:29 | Re : Background Position en Jquery sur un div à la vertical

Dacobah
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.
jeudi 30 décembre 2010 à 21:24:22 | Re : Background Position en Jquery sur un div à la vertical

PetoleTeam

Membre Club
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)
vendredi 31 décembre 2010 à 00:16:07 | Re : Background Position en Jquery sur un div à la vertical

Dacobah
Oui effectivement ça marche aussi
Merci encore !


Cette discussion est classée dans : déplacement, code, background, div, vertical

Répondre à ce message

Sujets en rapport avec ce message

Un SEUL background [ par floflotz ] bonjour à tous,je souhaite mettre une image en background sur mon site. Le problème est que quand j'applique la propriété background à mon body, il mu Ecriture d'un DIV -> Pb de compatibilité. [ par Tiller ] Hi! Bon alors voila, j'ai un petit probleme de compatibilité avec un petit code de JavaScript. Celui-ci prend le ..value et l'écrit dans un div. Le p Eviter que la class parent prenne le pas sur la class fille... [ par atomik29 ] Bonjour a tous,voici mon probleme :J'ai une serie de div qui me servent a creer un div arrondi avec images pour les bords.J'ai rajouté dans la classe Problème d'overflow dans un div [ par MadM@tt ] Bonjour à tous,voilà mon problème est simple à comprendre ^^, après à résoudre je n'y arrive pas Pour voir le problème, voici le lien :<a href="http:/ Récupérer le contenu d'une div avec Ajax [ par rider73n8 ] Salut à tous, J'ai une petit problème en Ajax. Je vous fourni les quelques lignes de code nécessaire à la compréhension et j'explique ensuite. Dans Probleme de display [ par maxroucool ] Slt, voici mon code: [code]function verifPseudo(pseudo)     {         if(pseudo)         {           &nb jquery : page chargée dans un div mais n'est pas dans le source [ par buster1959 ] Bonjour, j'utilise jquery et volà mon problème qui est avant tout un probléme de javascript ou d'ajax (je ne sais pas).J'ai besoin, après avoir chargé affichage de resultat d'un code asp dans un div ou table d'une autre page [ par bouzakher ] salut je veut affichage le résultat d'un code asp dans un div ou table d'une autre page . autrement dit je veut fair un appel a un code asp et affich PROBLEME DIV [ par elmarko ] Salut,je sors juste d'une formation rapide sur "dream/code html/css" de base... et j'ai besoin d'une explication sur l'attribution d'un comportement à ouvrir fermer des div sur une même page css/javascript [ par catejo ] Bonjour à tous, j'ai un petit problème de script pour activer le deuxieme bouton Pour l'instant seul le premier bouton fonctionne . Que faut-t-il mo


Nos sponsors


Sondage...

Comparez les prix


Mio - Moov V735 - GPS Europe - Ecran 7"
Entre 305€ et 375€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Frau auf Feld mit KopfsalatPhoto Underwater
Photo Sea star and sponges 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,640 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)