11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Animate et backgroundPosition (jquery ): problème de débutant

Bonjour,
j'ai des soucis en jquery, j'ai compris le fonctionnement principal mais je n'arrive pas à mettre en oeuvre ce que je veux faire.

j'essaie d'animer un background via le plugin background position et ça à l'air tellement simple que je n'y arrive pas Smiley decu j'essaie de faire monter le background sur survol de la souris.

l'exemple est simple :
$('#background').animate({backgroundPosition: '150px 250px'});
http://plugins.jquery.com/project/backgroundPosition-Effect.

et j'essaie donc de l'adapter:


#bouge {
        background: url(2ndnavtest.png);
	background-position: 0px 18px;
	background-repeat:no-repeat;    
        width:184px; 
	height:54px; 
	display:block
}




<script type="text/javascript">
$(function(){
  $('#bouge').css({backgroundPosition: "0px 18px"}).hover(
  function () {
  $(this).animate({backgroundPosition: "(0px 0px)"});
  },
  function () {
    $(this).animate({backgroundPosition: "(0px 18px)"});
  }
 );
});
</script>

dans le body

<div id="bouge">calque test</div>


je sollicite votre aide, car je ne comprend pas ce qui ne va pas.
Merci à tous
Modifié par albtr (20 Nov 2010 - 13:17)
Bonjour,

Pour commencer, pourrais-tu modifier ton message ci-dessus pour baliser les blocs de code correctement?
- Utilise le bouton «éditer» en haut à droite pour accéder au formulaire d'édition. (Il faut au préalable être connecté sur le forum, sinon tu ne vois pas le bouton.)
- Tu peux utiliser la syntaxe [ code=html] ton code HTML [ /code] et [ code=js] ton code JavaScript [ /code] (sans espaces après les crochets ouvrant).

Ensuite, je vois que tu écris: backgroundPosition: "(0px 18px)". À quoi sont censées servir ces parenthèses? Si tu utilises des parenthèses de la sorte en CSS, je pense que le navigateur ne va pas reconnaitre la valeur de background-position (syntaxe invalide), et va l'ignorer. C'est sans doute la même chose ici.
Effectivement les parenthèses ne servaient à rien. Mais ça ne fonctionne pas plus. j'ai aussi alleger le début du script.


<script type="text/javascript"> 
$(function(){ 
  $('#bouge').hover( 
  function () { 
  $(this).animate({backgroundPosition: "0px 0px"}); 
  }, 
   function () { 
    $(this).animate({backgroundPosition: "0px 18px"}); 
  } 
 ); 
}); 
</script>

Modifié par albtr (19 Nov 2010 - 19:06)
On pourrait voir ta page ?
T'es sûr que tes js son bien appelés par ta page.

La démo utilise une version 1.3.2 de jQuery, et toi ?
bonjour, je viens de le mettre en ligne (je testais en local) et ça fonctionne ...
je n'y comprend rien. Mon script ne fonctionne pas en local (mais avec accès web) mais fonctionne lorsque je le met en ligne Smiley ohwell .

Merci pour aide je vais pouvoir continuer à avancer ^^

http://design9071.free.fr/testscript/script/
C'est étonnant que ton script fonctionne puisque l'appel à ton js ne renvoie rien :

En effet, tu as écrit "jquery.backgroundpos.js" alors que le fichier s'appelle jquery.backgroundPosition.js.

Voila.
Modifié par loicbcn (20 Nov 2010 - 13:59)
Effectivement ça fonctionne mieux avec le bon .js Smiley biggol .
j'ai enfin mon bel effet. Merci loicbcn.
Sujet clos
Aller à