Vraag & Antwoord

Webprogrammeren & scripting

[jQuery] Waarom werkt hover niet?

5 antwoorden
  • Ik ben sinds kort aan het rommelen met jQuery. Nu probeer ik een hover effect te maken met jQuery, in dit geval linkjes in een navigatiemenu, die deel uitmaken van een unordered list. Normaal zou ik dat in CSS met a:hover doen, maar met jQuery kun je mooi animeren. Bovendien is het een leuke oefening voor een beginner als ik. Het vreemde is dat onderstaande jQuery code het wel doet als ik er dingen als margin, padding of positionering mee doe, maar met kleuren en letterspacing gebeurt er helemaal niks. Het lijkt wel alsof dat niet 'mag', want hij 'vind' de juiste elementen dus blijkbaar wel, en animeert ze ook bij een rollover als ik er de eerder genoemde margin en padding handelingen mee uitvoer. HTML [code:1:20baddcdf8]<div id="navigationbar"> <ul > <li><a href="#1">Pagina 1</a></li> <li><a href="#2">Pagina 2</a></li> <li><a href="#3">Pagina 3</a></li> </ul> </div><!-- end navigation bar -->[/code:1:20baddcdf8] CSS [code:1:20baddcdf8]#navigationbar ul { margin: 0px; padding: 0px; } #navigationbar li { margin: 0px; list-style-type: none; } #navigationbar a { font-family: helvetica, verdana, arial; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-align: center; text-decoration: none; color: #000; background: #CCC; display: block; width: 150px; float: left; padding: 5px 10px 5px 10px; }[/code:1:20baddcdf8] jQuery [code:1:20baddcdf8] $(document).ready(function(){ $("#navigationbar li").hover(function() { $(this).find('a') .animate({ color: '#555', backgound: '#FFF', letter-spacing: 3px }, 200); } , function() { $(this).find('a') .animate({ color: '#000', backgound: '#CCC', letter-spacing: 1px }, 200); }); });[/code:1:20baddcdf8]
  • Om mijn eigen vraag te beantwoorden: [url=http://api.jquery.com/animate/]The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.[/url] Hoe het dan wel moet en of het uberhaupt (op een andere manier) kan ga ik nu weer uitzoeken.
  • color en background lijken niet te woren ondersteund. Voor color-animations is er een plugin: http://plugins.jquery.com/project/color
  • Bedankt! Ik ben me nog niet zo erg in jQuery plugins aan het verdiepen (eerst de basis maar eens onder de knie krijgen), maar zo te zien is het de moeite waard :-)
  • ik moet bekennen dat ik er ook nog weinig van weet en er nooit echt veel mee gedaan heb maar deel je mening geheel: het biedt inderdaad veel mogelijkheden. Vooral ook handig icm Ajax denk ik.

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.