Det er relativt nemt.
Læs diverse guides her:
http://docs.jquery.com/Main_PageTil dit program, vil det er jQuery være noget alla følgende:
$(".klasse").css("opacity", 0.5).mouseover(function() { $(this).animate({ opacity: 1.0 }, 250); }).mouseout(function() { $(this).animate({ opacity: 0.5 }, 250); });(Hvor .klasse skal være den klasse dine knapper har)
Det fantastiske ved jQuery er at man kan sammenkæde funktioner, da alle returnere det objekt de selv er kædet til.
Ovenstående kan skrives uden sammenkædning sådan her:
$(".klasse").css("opacity", 0.5);
$(".klasse").mouseover(function() { $(this).animate({ opacity: 1.0 }, 250); });
$(".klasse").mouseout(function() { $(this).animate({ opacity: 0.5 }, 250); });
Koden jeg har skrevet til dig, gør et element halv transparent, og skifter flydende til ikke-transparent når man flytter musen over. (Og tilbage når man flytter musen væk)
Hov: Den her tutorial er rigtig god:
http://docs.jquery.com/Tutorials:How_jQuery_WorksEdit igen: Syntes faktisk effekten er ret fed.
Har brugt den på min side jeg er ved at bygge, så du kan se hvordan det virker det. (Har smækket det på menuen og CV linket)
http://www.creativeben.dk/Hov, edit igen igen:
Det ovenstående er unobtrusive, dvs. du skal IKKE smække det direkte ind i dine links.
Istedet for skal du putte det ind i <head>
Sådan her:
<head>
....
<script type="text/javascript">
$(function(){
$(".klasse").css("opacity", 0.5).mouseover(function() { $(this).animate({ opacity: 1.0 }, 250); }).mouseout(function() { $(this).animate({ opacity: 0.5 }, 250); });
});
</script>
...
</head>
Den finder automatisk alle med klassen, og smækker funktioneliten på. Med jQuery er dagene ovre hvor du skriver javascript i selve links osv. Brug evt en .js fil til alt dit javascript, så du slet ikke behøver at tænke på det i dit HTML. Bare hent det ind, som om det var CSS.
Indlæg senest redigeret d. 30.07.2008 04:34 af Bruger #2775