[résolu][jQuery]mouseover+page active sur One page

mouseover+page active sur One page [résolu][jQuery] - HTML/CSS - Programmation

Marsh Posté le 28-02-2014 à 23:43:59    

Bonjour à tous!

Je développe actuellement un site personnel du style one page et animé en jQuery pour des raisons esthétiques. J'ai recherché la solution à mon problème, posé la question sur d'autres forums où l'on ne m'a malheureusement pas aidé, et toutes les solutions apportées ne fonctionnaient pas pour moi; peut-être que trop de critères entrent en jeu?
 
Voilà le problème: je cherche à cumuler sur mon one page un effet de mouseover sur les boutons de mon menu (qui ne renvoient donc vers aucun lien) puis à conserver cet effet au cas où la section vers laquelle ce bouton redirige est active.
 
Plus clairement, mes boutons sont, de base, partiellement cachés derrière une div et se dévoilent entièrement lorsqu'ils sont survolés (ils se déplacent donc de x pixels sur le côté grâce au mouseover). Je veux donc que ces boutons restent dévoilés lorsque la section est active. Il faudrait donc que le mouseover se désactive quand la section est active et se réactive lorsqu'une autre section est appelée. Et c'est sur ce point-là que ça foire! Si le mouseover est désactivé, il ne se réactive jamais - le soucis doit venir du unbind que j'ai, vous le comprendrez, un peu du mal à saisir.
 
J'ai créé un jsfiddle pour que vous ayez accès au gros du code.
http://jsfiddle.net/86eRh/2/
 
Le menu est représenté par les rectangles rouges.  
Pourriez-vous me venir en aide en m'expliquant comment réparer l'erreur?


Message édité par radoc le 01-03-2014 à 09:04:21
Reply

Marsh Posté le 28-02-2014 à 23:43:59   

Reply

Marsh Posté le 01-03-2014 à 01:09:24    

Ce sont les bind qui sont mal utilsés.
 
https://api.jquery.com/bind/

Code :
  1. .bind( eventType [, eventData ], handler(eventObject) )


 
Il faut fournir au minimum 2 arguments.
 
Par exemple, faire un truc du genre :  

Code :
  1. $(this).bind('mouseover', function () {
  2.                      $( this ).css({ right:"0"});
  3.                  }).bind('mouseout', function () {
  4.                      $( this ).css({ right:"-88px"});
  5.                  })


 
Edit : après oui tu n'as peut-être pas bien saisi le fonctionnement de unbind, parce que sinon tu en déduirais que faire un unbind-all/re-bind n'est pas idéal dans ce cas d'utilisation.


Message édité par czh le 01-03-2014 à 01:18:10
Reply

Marsh Posté le 01-03-2014 à 09:03:01    

Ah oui d'accord, j'étais loin du compte haha.  
J'ai essayé, ça fonctionne très bien (le seul hic reste que lorsque je clique sur un bouton, celui-ci se rétracte et se redévoile avant de rester fixe - mais je devrais pouvoir m'en sortir à ce niveau-là).
 
Merci beaucoup Czh!

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed