Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Sřg
 

Javascript Fade

Hej Rowl'er.

Jeg er ved at lave noget fade, problemet er bare den at den sagtens gider at fade lidt.
Men den ligger bare ikke mere til end en gang, det ville sige værdi'en altid er 0.1, men den skulle gerne blive højrere.

Koden er:

  1. function Fade()
  2. {
  3.     var opacity = document.getElementById('boks_baggrund').style.opacity;
  4.         
  5.     if(opacity < 0.9)
  6.     {
  7.         opacity = opacity+0.1;
  8.         document.getElementById('boks_baggrund').style.opacity=opacity;
  9.         
  10.         setTimeout("Fade()",1000);

  12.     }
  13. }

Nogen der ved hvad jeg gør galt ...?

Med venlig hilsen
- Lasse.

Pointfordeling

Forfatteren har lukket trĺden og har valgt at fordele de 20 point sĺledes:
Thomas 20 point
Oprettet af:
Tudeprinsen

Javascript

Point afsat: 20

Lukket
20:19 23/06/2010
Hvad vil du have den til? Når man kalder funktionen Fade(), skal den så fade helt væk?
Oprettet af:
Thomas

Accepteret svar

Point modtaget: 20
20:38 23/06/2010
Thomas skrev kl. 20:38 d. 23/06/2010
Hvad vil du have den til? Når man kalder funktionen Fade(), skal den så fade helt væk?

Den skal ikke fade væk med frem, hvilket ville sige den starter på 0 også skal den op på 0.9.
Men den gider kun at gå op til 0.1 og ikke videre, ved ikke hvad der er galt :S
Oprettet af:
Tudeprinsen

Kommentar
20:45 23/06/2010
jQuery..

fadeIn("1000");

fadeOut("1000");
Oprettet af:
inctor

Kommentar
20:45 23/06/2010
inctor skrev kl. 20:45 d. 23/06/2010
jQuery..

fadeIn("1000");

fadeOut("1000");

Prøv lige at hør her, jeg er ikke intresseret i at bruge noget færdig lavet.
Jeg beder om at en eller anden gider at hjælpe mig med at finde min fejl, beder ikke om andres koder ;b

Har du ikke læst min tråd?
Sidst redigeret 20:49 23/06/2010
Oprettet af:
Tudeprinsen

Kommentar
20:49 23/06/2010
Som inctor siger, så vil jQuery, give dig et meget bedre og hurtigere resultat ;)
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  3. <script type="text/javascript">
  4.   

  6.           $(function() {
  7.             $('#knap').click(function() {
  8.   
  9.                 $('#boks_baggrund').fadeIn(1000);

  11.           });
  12.           });

  14. </script>
  15.       
  16. <div style="background-color: #000; width: 100px; height: 100px; display: none;" id="boks_baggrund"></div>
  17. <div style="background-color: #000; width: 100px; height: 100px;" id="knap"></div>
Et lille eksempel ;) Meget nemmere
Oprettet af:
Thomas

Kommentar
20:49 23/06/2010
Thomas skrev kl. 20:49 d. 23/06/2010
Som inctor siger, så vil jQuery, give dig et meget bedre og hurtigere resultat ;)
Et lille eksempel ;) Meget nemmere

Okay har i bare slet ikke læst min tråd eller hvad?
Jeg ville ikke have noget færdig kodet, jeg beder om hjælp til min fejl.

Er lidt ligeglad med jquery jeg fortrækker altså at kode alt fra bunden selv :b
Oprettet af:
Tudeprinsen

Kommentar
20:50 23/06/2010
Prøv at leg lidt med jQuery, det er supernemt at arbejde med.

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
Et link til et godt sted at starte ;)
Oprettet af:
Thomas

Kommentar
20:50 23/06/2010
Thomas skrev kl. 20:50 d. 23/06/2010
Prøv at leg lidt med jQuery, det er supernemt at arbejde med.
Et link til et godt sted at starte ;)

Er der ingen som læser det jeg skriver eller hvad har i lige gang i? o.o
Oprettet af:
Tudeprinsen

Kommentar
20:51 23/06/2010
Jeg prøver bare at give min ekspertise, ved at vise dig hvor enkelt det kan gøres med jQuery? Der er ingen der siger du skal bruge det?
Oprettet af:
Thomas

Kommentar
20:53 23/06/2010
Thomas skrev kl. 20:53 d. 23/06/2010
Jeg prøver bare at give min ekspertise, ved at vise dig hvor enkelt det kan gøres med jQuery? Der er ingen der siger du skal bruge det?

Nej men har da lige sagt til hr inctor at jeg ikke intressere mig for open source koder.
Og jeg spørger jo bare om der er en som kan hjælpe mig med at løse mit problem/fejl ;)
Oprettet af:
Tudeprinsen

Kommentar
20:54 23/06/2010
Men hvis vi skal snakke om din nuværende kode, så undersøg lige om din variabel opacity overhovedet indeholder noget. Lav en document.write med variablen, det kan være at du selv skal fodre den med en startværdi.

Edit.
Jeg sidder ikke og opdaterer siden, mens jeg skriver, så jeg så ikke din kommentar til inctor, før jeg havde postet beskeden.
Sidst redigeret 20:57 23/06/2010
Oprettet af:
Thomas

Kommentar
20:55 23/06/2010
Thomas skrev kl. 20:55 d. 23/06/2010
Men hvis vi skal snakke om din nuværende kode, så undersøg lige om din variabel opacity overhovedet indeholder noget. Lav en document.write med variablen, det kan være at du selv skal fodre den med en startværdi

Den indeholder 0 også bliver den til 0.1 også bliver den ved 0.1, har allerede før jeg postede herinde tjekket min fejl med alert :)
Derudover har jeg tjekket om der kommer noget Udråbstegn nede i hjørnet af browseren men det gør der ikke.
Sidst redigeret 20:57 23/06/2010
Oprettet af:
Tudeprinsen

Kommentar
20:56 23/06/2010
Jeg prøver lige at lege lidt med koden ;) Vent lige et par minutter
Oprettet af:
Thomas

Kommentar
21:02 23/06/2010
Thomas skrev kl. 21:02 d. 23/06/2010
Jeg prøver lige at lege lidt med koden ;) Vent lige et par minutter

Jamen det gør jeg så, det bare helt iorden :D
Oprettet af:
Tudeprinsen

Kommentar
21:02 23/06/2010
Så fik jeg den knækket :P

  • var opacity = opacity*1+0.1;

Opacity er en variabel, og javascript kan af gode grunde ikke addere en variabel, derfor er du nød til at gange med 1 for at det skal fungere ;)
Og forresten, så er 1 sekund nok lidt for meget på din setTimeout ;) Hvis det skal give en flydende overgang :)
Sidst redigeret 21:11 23/06/2010
Oprettet af:
Thomas

Kommentar
21:09 23/06/2010
Thomas skrev kl. 21:09 d. 23/06/2010
Så fik jeg den knækket :P

  • var opacity = opacity*1+0.1;

Den opfatter opacity som en variabel, og javascript kan af gode grunde ikke addere en variabel, derfor er du nød til at gange med 1 for at det skal fungere ;)

Jeg siger tusind tak for hjælpen det virker, jeg giver dig pointene som du har fortjent :-)
Oprettet af:
Tudeprinsen

Kommentar
21:10 23/06/2010
Det var så lidt ;)
Oprettet af:
Thomas

Kommentar
21:12 23/06/2010
Æhm lige et spørgsmål, den virker fint i firefox, men ikke i internet explorer.
Har lavet min kode sådan:

  1. function Fade()
  2. {
  3.     var firefox = document.getElementById('boks_baggrund').style.opacity;
  4.     var ie = document.getElementById('boks_baggrund').style.filter;

  6.     if(firefox < 0.9)
  7.     {
  8.         firefox = firefox*1+0.1;
  9.         ie = ie*1+1;

  11.         document.getElementById('boks_baggrund').style.opacity=firefox;
  12.         document.getElementById('boks_baggrund').style.filter="alpha(opacity="+ie+")";
  13.         
  14.         setTimeout("Fade()",20);

  16.     }
  17. }

Ved du hvad der er galt?
Oprettet af:
Tudeprinsen

Kommentar
21:26 23/06/2010
if(firefox < 0.9) { du bruger jo kun firefox variablen til at tjekke, du bør lave en separat js fil til IE og FF. Endnu engang vil jeg gerne referere til jQuery hvor du kan undgå disse problemer ;)
Oprettet af:
Thomas

Kommentar
22:07 23/06/2010
Thomas skrev kl. 22:07 d. 23/06/2010
if(firefox < 0.9) { du bruger jo kun firefox variablen til at tjekke, du bør lave en separat js fil til IE og FF. Endnu engang vil jeg gerne referere til jQuery hvor du kan undgå disse problemer ;)

Haha :D
Og altså selv om jeg sepere (staves?) dem så virker det stadig ikke hos internet explorer, men det virker fint hos firefox.
Der er noget galt med faden eller aplha såvel css'en.
Oprettet af:
Tudeprinsen

Kommentar
22:08 23/06/2010
Det er fordi var ie = document.getElementById('boks_baggrund').style.filter; returener alpha(opacity=0), og ikke bare 0.. Jeg prøver lige at fixe en løsning ;)
Oprettet af:
Thomas

Kommentar
22:16 23/06/2010
  1. <script type="text/javascript">
  2.       
  3. function is_int(value){
  4.   if((parseFloat(value) == parseInt(value)) && !isNaN(parseInt(value))){
  5.       return true;
  6.  } else {
  7.       return false;
  8.  }
  9. }
  10.       
  11.       function Fade()
  12.   
  13.       {
  14.   
  15.         var firefox = document.getElementById('boks_baggrund').style.opacity;
  16.  
  17.         var ie = document.getElementById('boks_baggrund').style.filter;
  18.   
  19.         ie1 = ie.substr(14,1)
  20.         if (is_int(ie.substr(15,1))){
  21.             ie2 = ie.substr(15,1);
  22.         }
  23.         
  24.         ie = ie1+ie2;
  25.         
  26.           if(ie < 89){
  27.   
  28.       
  29.  
  30.               ie = ie*1+10;

  32.  
  33.               document.getElementById('boks_baggrund').style.filter="alpha(opacity="+ie+")";

  35.               

  37.               setTimeout("Fade()",100);


  40.  
  41.           }

  43.       }
  44.       </script>

Et eksempel til IE, kan sikkert gøres mere enkelt, men endnu en god grund til at bruge jQuery, du undgår at bruge alternativer ;)
Oprettet af:
Thomas

Kommentar
22:25 23/06/2010
Thomas skrev kl. 22:16 d. 23/06/2010
Det er fordi var ie = document.getElementById('boks_baggrund').style.filter; returener alpha(opacity=0), og ikke bare 0.. Jeg prøver lige at fixe en løsning ;)

Forstår dig ikke lige hvorfor at min kode ikke virker.
Kan du forklarer det lidt tydeligere og ikke for noget men syntes din kode er ret indviklet.
Oprettet af:
Tudeprinsen

Kommentar
14:14 24/06/2010
Det har noget at gøre med at når du henter opacityen med
  • document.getElementById('boks_baggrund').style.filter;
så returnerer den "alpha(opacity=0)", og ikke bare tallet 0, derfor bliver du nød til at sortere alt teksten fra og lave det om til en integer (ved at gange med 0). Men da de både kan være et 1-cifret tal, og 2-cifret tal, tjekker jeg om tal nr. 15 også er et tal, i så fald det er, laver den begge tal om til variablen ie - som du så kan addere.
Oprettet af:
Thomas

Kommentar
14:46 24/06/2010
Hvordan kan jeg så sortere alt teksten fra ...?
Oprettet af:
Tudeprinsen

Kommentar
14:58 24/06/2010
  1. function is_int(value){

  3.   if((parseFloat(value) == parseInt(value)) && !isNaN(parseInt(value))){

  5.       return true;
  6. } else {

  8.       return false;

  10. }

  12. }

  14. ie1 = ie.substr(14,1)
  15. if (is_int(ie.substr(15,1))){

  17. ie2 = ie.substr(15,1);

  19. }

Først bruger du substr til at tage det tal der står som nr. 14: ie1 = ie.substr(14,1)

Funktionen is_int, returnerer true, hvis tallet er en integer, så tjekker du med substr, om ciffer nummer 15 er et tal, i så fald at det er, skal den gemme det i variablen ie2.
Og til sidst samler du begge tal i én variabel, ie = ie1+ie2;
Oprettet af:
Thomas

Kommentar
15:59 24/06/2010
Thomas skrev kl. 15:59 d. 24/06/2010
  1. function is_int(value){

  3.   if((parseFloat(value) == parseInt(value)) && !isNaN(parseInt(value))){

  5.       return true;
  6. } else {

  8.       return false;

  10. }

  12. }

  14. ie1 = ie.substr(14,1)
  15. if (is_int(ie.substr(15,1))){

  17. ie2 = ie.substr(15,1);

  19. }

Først bruger du substr til at tage det tal der står som nr. 14: ie1 = ie.substr(14,1)

Funktionen is_int, returnerer true, hvis tallet er en integer, så tjekker du med substr, om ciffer nummer 15 er et tal, i så fald at det er, skal den gemme det i variablen ie2.
Og til sidst samler du begge tal i én variabel, ie = ie1+ie2;

Det må kunne gøres på en lettere måde end som så :)
Oprettet af:
Tudeprinsen

Kommentar
16:07 24/06/2010
Tudeprinsen skrev kl. 16:07 d. 24/06/2010
Thomas skrev kl. 15:59 d. 24/06/2010
  1. function is_int(value){

  3.   if((parseFloat(value) == parseInt(value)) && !isNaN(parseInt(value))){

  5.       return true;
  6. } else {

  8.       return false;

  10. }

  12. }

  14. ie1 = ie.substr(14,1)
  15. if (is_int(ie.substr(15,1))){

  17. ie2 = ie.substr(15,1);

  19. }

Først bruger du substr til at tage det tal der står som nr. 14: ie1 = ie.substr(14,1)

Funktionen is_int, returnerer true, hvis tallet er en integer, så tjekker du med substr, om ciffer nummer 15 er et tal, i så fald at det er, skal den gemme det i variablen ie2.
Og til sidst samler du begge tal i én variabel, ie = ie1+ie2;

Det må kunne gøres på en lettere måde end som så :)
Med jQuery (; At få javascript til at passe i alle browsere, er rent ud sagt -Skide besværligt. jQuery er på ingen måde snyd, det er ikke kun en let omvej, men et bibliotek som giver dig en anden måde at kode på, hurtigere både hvad angår skrivning af kode, men også afvikling i browseren ;)

Umiddelbart kan jeg ikke se andre måder at skaffe opacityen i IE, medmindre du bruger noget RegExp, men det er desværre ikke min stærke side :/
Oprettet af:
Thomas

Kommentar
16:13 24/06/2010
Okay, jeg har sagt og siger det for sidste gang gider ikke at bruge noget andre har lavet.
For det andet fint tak for hjælpen, spørger en ven til råds :)
Oprettet af:
Tudeprinsen

Kommentar
16:14 24/06/2010
Du skal vćre oprettet og logget ind for at svare pĺ en trĺd
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes