Søg
Avatar billede groenaert Novice
06. juni 2007 - 11:09 Der er 1 kommentar og
1 løsning

Fade Out/In ved load

Jeg har forsøgt at lege lidt med bearhugx svar i spm. http://www.eksperten.dk/spm/307520, men da jeg ikke er den store ørn til javascript, kan jeg kun få scriptet til at fade min menuillustration ud.

Menuillustration er i toppen af siden og skal fade ud hvorefter sidens indhold skal fade ind. Dette skal selv sagt virke ved når siden er loadet. Hvis det har nogen betydning så ligger siden i et frameset.

Grønært.
Avatar billede groenaert Novice
06. juni 2007 - 11:37 #1
For en god ordens skyld, så er det dette script:

<script>
        var fadeFrame = 0;
        var tFader;
        function fadeIt(obj, steps, delay, delta) {
            if(delta>0) {obj.display = "block";}
            if(delta<0 && obj.filters.alpha.opacity==0) {obj.style.visibility="hidden";}
         
            obj.filters.alpha.opacity = obj.filters.alpha.opacity + delta;

            if(fadeFrame<steps+1) {
                ++fadeFrame;
                var fFadeIt = function a() { fadeIt(obj, steps, delay, delta); };
                tFader = setTimeout(fFadeIt,delay);
            }
        }
        function fadeIn (obj, steps, delay, pause ) {
            clearTimeout(tFader);
            fadeFrame=0;
            var fadeDelta = (((100-(obj.filters.alpha.opacity))/steps)+1);
            var fade = function a() { fadeIt(obj, steps, delay, fadeDelta); };
            this.setTimeout(fade, pause);
        }
        function fadeOut(obj, steps, delay, pause ) {
            clearTimeout(tFader);
            fadeFrame=0;
            var fadeDelta = -((obj.filters.alpha.opacity/steps)+1);
            var fade = function a() { fadeIt(obj, steps, delay, fadeDelta); };
            this.setTimeout(fade, pause);
        }
    </script>

-Og jeg har prøvet:

<body onLoad="java script:fadeOut(box1, 40, 80, 4000); fadeIn(box2, 40, 80, 4000);">
Avatar billede groenaert Novice
07. juni 2007 - 08:57 #2
Fandt løsningen i dette script:

<script>
  var WAVSCRIPT_FADENUMBER=0
    function fade(){
    if(navigator.appName=="Microsoft Internet Explorer")
    {
    var WAVSCRIPT_DOMCHANGESTYLE="filter='alpha(opacity='+WAVSCRIPT_FADEINCRIMENTVARIABLE"+WAVSCRIPT_FADENUMBER+"+')'"
    }
    else
    {
    var WAVSCRIPT_DOMCHANGESTYLE="opacity=0+'.'+WAVSCRIPT_FADEINCRIMENTVARIABLE"+WAVSCRIPT_FADENUMBER
    }
  if(arguments[2]=="in")
  {
  document.write("<scr"+"ipt>var WAVSCRIPT_FADEINCRIMENTVARIABLE"+WAVSCRIPT_FADENUMBER+"=10;function WAVSCRIPT_FADEFUNCTION"+WAVSCRIPT_FADENUMBER+"(){document.getElementById('"+arguments[0]+"').style."+WAVSCRIPT_DOMCHANGESTYLE+";WAVSCRIPT_FADEINCRIMENTVARIABLE"+WAVSCRIPT_FADENUMBER+"++;timer"+WAVSCRIPT_FADENUMBER+"=setTimeout('WAVSCRIPT_FADEFUNCTION"+WAVSCRIPT_FADENUMBER+"()',"+arguments[1]+");if(WAVSCRIPT_FADEINCRIMENTVARIABLE"+WAVSCRIPT_FADENUMBER+"==99){clearTimeout(timer"+WAVSCRIPT_FADENUMBER+")}else{}}WAVSCRIPT_FADEFUNCTION"+WAVSCRIPT_FADENUMBER+"()</scr"+"ipt>")
  }
  else
  {
  document.write("<scr"+"ipt>var WAVSCRIPT_FADEINCRIMENTVARIABLE"+WAVSCRIPT_FADENUMBER+"=99;function WAVSCRIPT_FADEFUNCTION"+WAVSCRIPT_FADENUMBER+"(){document.getElementById('"+arguments[0]+"').style."+WAVSCRIPT_DOMCHANGESTYLE+";WAVSCRIPT_FADEINCRIMENTVARIABLE"+WAVSCRIPT_FADENUMBER+"--;timer"+WAVSCRIPT_FADENUMBER+"=setTimeout('WAVSCRIPT_FADEFUNCTION"+WAVSCRIPT_FADENUMBER+"()',"+arguments[1]+");if(WAVSCRIPT_FADEINCRIMENTVARIABLE"+WAVSCRIPT_FADENUMBER+"==10){WAVSCRIPT_FADEINCRIMENTVARIABLE"+WAVSCRIPT_FADENUMBER+"=0;document.getElementById('"+arguments[0]+"').style."+WAVSCRIPT_DOMCHANGESTYLE+";clearTimeout(timer"+WAVSCRIPT_FADENUMBER+");}else{}}WAVSCRIPT_FADEFUNCTION"+WAVSCRIPT_FADENUMBER+"()</scr"+"ipt>")
  }
  WAVSCRIPT_FADENUMBER++
  }
  </script>

Og

<div id="t1" style="width:100%;">element 1 fades in at 100 89 milisecond increments</div>
  <div id="t2" style="width:100%;">element 2 fades out at 50 89 milisecond increments</div>
  <div id="t3" style="width:100%;">element 3 fades out at 20 89 milisecond increments</div>
  <div id="t4" style="width:100%;">element 4 fades in at 20 89 milisecond increments</div>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 17:11 Har glemt navn på min ene konto på eksperten! Af ErikHg i Fri debat
I går 15:00 RIP af DVD med MakeMKV Af dcedata1977 i Servere
I går 10:08 slet windows Af jajoh i Windows
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
White papers
Flere white papers »