JQuery, toggleClass med fade effekt.

[Fylling]

Hei, eg designer ei nettside for kjemi nå og skulle gjerne hatt en "fin fin" effekt på headeren min.

 

Det eg er ute etter, er å gjøre teksten i elemtet jeg svever musen over hvitere,

fra en svak-grå til helt hvitt. Men eg vil at det skal ha en fade overgang og brukte da JQuery, men klarte det ikke.

 

her er JQuery-koden:

http://pastebin.com/Ha2e9fMY

 

Eg har prøvd veldig mye forskjellig, som add/removeClass, animate og fade-typer, men har ikke klart det enda. Aner ikke hva eg gjør feil

 

Lurer også på hvorfor denne ikke fungerer (har lagt til en delay her):

http://pastebin.com/gEF61Aiq

 

 

Kan noen hjelpe meg?

Denne koden eg først linket til fungerer, men gir meg ikke den ønskede fade effekten, som du kan se på footeren her:

https://twitter.com/

[molty]

For meg virker det som det har noe med css å gjøre. Ikke jQuery opplegg. Det er fordi når jeg har oppe inspect og går over tekten med musen, endrer ingen ting seg på den lenken i inspect. Jeg så derimot ikke noe css kode som kunne passe til det med det blotte øye, så hvis du fokuserer på at det er css (og hvis det er css) så vil du sikkert kunne finne det til slutt.

 

Edit:

Fant litt til deg her. På lenkene har de denne koden:

color: rgba(255, 255, 255, .3);
-webkit-transition: color .2s linear;

Fargen der er satt med opacity 0.3 som du ser, og så der det står .2s sier hvor lang tid transitionen skal ta (med hover f.eks). Og ved hover så har de bare enkelt satt fargen hvit

 

Håper dette hjelper deg

 

Molty

Endret 8. mai 2012 av molty

[Fylling]

Eg har aldri sett noe css som kan brukes slik uten javascript :/

 

Men du vet ikke hvordan eg kan få til en fade effect på jquery'en heller?

[molty]

Eg har aldri sett noe css som kan brukes slik uten javascript :/

 

Men du vet ikke hvordan eg kan få til en fade effect på jquery'en heller?

Fade kan du bruke ved å bruke fadein og fadeout, eller bruke animate opacity. f.eks

$(element).hover(function(){
$(this).animate({opacity:1});
}, function(){
$(this).animate({opacity:0.3});
});

[agm]

Eg har aldri sett noe css som kan brukes slik uten javascript :/

 

Joda, det fungerer bra uten JS (men ikke i eldre nettlesere). Prøv noe sånt som dette:

 

a {
color:#777;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
a:hover {
color:#fff;

}

(Test her)

 

 

 

Men du vet ikke hvordan eg kan få til en fade effect på jquery'en heller?

 

Hvis du absolutt må bruke jQuery, så må du legge inn enten jQuery UI eller jQuery.color() pluginen for å animere farger. I mine øyne er det å kaste bort tid og ressurser, men her er et eksempel som funker (med jQuery og jQuery UI):

 

$('a').hover(function(){
$(this).stop().animate({'color':'#fff'},500);
}, function(){
 $(this).stop().animate({'color':'#777'},500);
});

(Test her)

Endret 9. mai 2012 av agm

[Fylling]

Dette er det rareste!

Eg har erfaring med jquery, og har fått til det eg har prøvd på.

Men nå aner eg ikke hva som skjer.

 

agm, din sin css kodin fungerte, men førte til en farge- og størrelses-forandring i border koden min.

Og jquery koden fungerer enda ikke.

 

Eg er sikkert på at linken er korrekt etc.

Her er koden min bare for å være sikker:

<!-- JQuery -->
<script src="js/JQuery.js" type="text/javascript"></script>
<script type="text/javascript">
$('#holder li a').hover(function(){
	$(this).stop().animate({'color':'#fff'},500);
}, function(){
	 $(this).stop().animate({'color':'#777'},500);
});
});
</script>

 

Kan det ha noe med rettighetene for filene å gjøre?

[Fylling]

Eg kan sikkert åpne http porten slik at dere kan se nettsida om dette hjelper da?

Men har ingen server-pc, så nettsida vil ikke være oppe hele tida.

[molty]

Dette er det rareste!

Eg har erfaring med jquery, og har fått til det eg har prøvd på.

Men nå aner eg ikke hva som skjer.

 

agm, din sin css kodin fungerte, men førte til en farge- og størrelses-forandring i border koden min.

Og jquery koden fungerer enda ikke.

 

Eg er sikkert på at linken er korrekt etc.

Her er koden min bare for å være sikker:

<!-- JQuery -->
<script src="js/JQuery.js" type="text/javascript"></script>
<script type="text/javascript">
$('#holder li a').hover(function(){
	$(this).stop().animate({'color':'#fff'},500);
}, function(){
	 $(this).stop().animate({'color':'#777'},500);
});
});
</script>

 

Kan det ha noe med rettighetene for filene å gjøre?

Jeg har lest at du må laste ned en jquery plugin for å bruke fargeendring i animasjon i jquery. Kanskje det er denne: http://archive.plugins.jquery.com/project/color

Har og hørt at du kan bruke noe annet enn jquery color pluginen.

 

Men hvorfor holder det ikke med å bruke bare vanlig css da? Joa, du slipper å måtte tilpasse den til hver enkelt browser med -webkit- -moz- osv osv, men det går jo fint det også?