jQuery Hyperlink Color Fade
Ik wil graag mijn hyperlinks laten faden naar de kleur die ik in een css bestand heb neergezet.
Ik heb daarvoor deze code:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script>
$(document).ready(function(){
$('a').hover( function() {
hovercolor = $(this).css("color");
$(this).animate({ backgroundColor: hovercolor }, 200);
});
});
</script>
$(document).ready(function(){
$('a').hover( function() {
hovercolor = $(this).css("color");
$(this).animate({ backgroundColor: hovercolor }, 200);
});
});
</script>
En dit is de css code:
Code (php)
1
2
3
2
3
div.menu > ul > li > a:hover {
color: #33CCFF;
}
color: #33CCFF;
}
Iemand enig idee wat ik fout doe?
Ja, de kleur wordt geladen, want die kan ik zien met een alert (RGB)
Alvast bedankt,
Gewijzigd op 07/02/2012 21:45:23 door Afhaal Chinees
Gesponsorde koppelingen:
Het mankement van jQuery Animate is dat het geen background-colors ondersteund. Gelukkig zijn er op de wereld genoeg developers die dit wel voor elkaar krijgen en daarom is er een jQuery color plugin gekomen. Laad deze JS samen met jQuery in in je site en jou code zal werken.
Wouter J op 07/02/2012 21:44:15:
[quote] tags zijn om mensen te citeren. We gebruiken hier [code] tags om code weer te geven, zou je dit misschien willen aanpassen=
En ik gebruik altijd een vraagteken als ik een vraag stel :P
Geintje natuurlijk, doe even Ctrl+Shift
Maargoed, ik bedoel dan wel font-kleuren en geen background-kleuren.
Er van uit gaande dat dat ook niet werkt zal ik eens naar die plugin kijken.
Afhaal Chinees op 07/02/2012 21:47:14:
Geintje natuurlijk, doe even Ctrl+Shift
Tja, als je veel met Vim werkt typ je vaak per ongeluk Shift+Ctrl in...
Quote:
Maargoed, ik bedoel dan wel font-kleuren en geen background-kleuren.
Maar je wilt de background-color animaten? Want dat zeg je in je scriptje 'backgroundColor'. En dan heb je de plugin nodig.
Font colors kunnen volgens mij wel gewoon (nog nooit getest).
Wouter J op 07/02/2012 21:50:45:
Maar je wilt de background-color animaten? Want dat zeg je in je scriptje 'backgroundColor'. En dan heb je de plugin nodig.
Font colors kunnen volgens mij wel gewoon (nog nooit getest).
Quote:
Maargoed, ik bedoel dan wel font-kleuren en geen background-kleuren.
Maar je wilt de background-color animaten? Want dat zeg je in je scriptje 'backgroundColor'. En dan heb je de plugin nodig.
Font colors kunnen volgens mij wel gewoon (nog nooit getest).
Oei, daar zeg je me wat. Foutje...
Maar als ik alleen color gebruik (i.p.v. backgroundColor) werkt het nog steeds niet, wat wel zou moeten volgens deze pagina: http://docs.jquery.com/UI/Effects/animate
Edit: Ik heb de jQuery UI core nodig, even downloaden hoor... Momentje dus.
Gewijzigd op 07/02/2012 21:57:12 door Afhaal Chinees
Afijn, ik heb nu deze code:
Code (php)
1
2
3
4
2
3
4
$("a").mouseover(function() {
hovercolor = $(this).css("color");
$(this).animate({ color: hovercolor }, 1000);
});
hovercolor = $(this).css("color");
$(this).animate({ color: hovercolor }, 1000);
});
Dan wordt de link in één flits blauw.
Als ik "color: hovercolor" verander in "color: "red"", dan veranderd de link in één keer in blauw (staat in de css) maar fade dan van blauw naar rood.
Is hier nog een oplossing voor?
Gewijzigd op 07/02/2012 22:08:21 door Afhaal Chinees
