11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'espère être dans le bon forum pour ma question...

Je souhaite animer une "languette" pour mon site Web.
Par défaut, la languette est partiellement cachée, et lors du clic de l'utilisateur, elle se déroule de la gauche vers la droite pour laisser apparaître l'intégralité de l'image.
J'ai donc deux images : état caché, état déroulé.
upload/23925-off.png
upload/23925-languetteo.png


Javascript, Jquery... Comment faire ? Il est important de voir l'animation, la languette se dérouler, et que ce ne soit pas en Flash !
Modifié par xtense (27 May 2010 - 14:27)
Pas testé, avec jQuery grâce à animate ... ça devrait marcher.


<div id="mondiv" style="background-image:url(languette.jpg);background-position-x:-30px;">&nbsp;</div>



$('#mondiv').hover(function(){ $(this).animate({'background-position-x':'0px'}); },function(){ $(this).animate({'background-position-x':'-30px'}); });

Modifié par icareo (26 May 2010 - 23:14)
En remplaçant "background-position-x" par "background-position", ça fonctionne très bien !

Merci beaucoup !!
C'est donc [Résolu] ?...
Merci de modifier le titre afin qu'on évite de venir sur le topic pour s'apercevoir qu'il est déjà résolu...