Avatar billede deamill Nybegynder
13. december 2010 - 10:52 Der er 5 kommentarer og
1 løsning

Fade ind/ud JavaScript

Hejsa,

Jeg ruger følgende kode til at fade mit <div> ind og ud med, det er noget jeg fandt på nettet.

Er der nogen der kan fortælle mig hvad jeg skal gøre hvis jeg ikke vil have den skal fade det helt ud, er det muligt? ALtså bare så det bliver faded lidt i baggrunden.

På forhånd tak.

Koden:

<script>
var TimeToFade = 1000.0;

function fade(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;
 
  if(element.FadeState == null)
  {
    if(element.style.opacity == null
        || element.style.opacity == ''
        || element.style.opacity == '1')
    {
      element.FadeState = 2;
    }
    else
    {
      element.FadeState = -2;
    }
  }
   
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  } 

}


function animateFade(lastTick, eid)

  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);

  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }

  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
 
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

</script>
Avatar billede claes57 Ekspert
13. december 2010 - 12:08 #1
test lige de 3 linjer med
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '0') + ')';
hvis du retter '0' til fx '20', altså
    element.style.opacity = element.FadeState == 1 ? '1' : '20';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '20') + ')';
Avatar billede deamill Nybegynder
13. december 2010 - 12:22 #2
Hmm, det var i hvert fald et skridt på vejen, dog er det som om det stadig fader helt ud, og så på sidste tick, fade den ind igen til en opacity på 20.

Tror du det er muligt at gøre så den stopper på f.eks. 20?
Avatar billede claes57 Ekspert
13. december 2010 - 12:43 #3
lidt længere ned sættes opacity
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;

det gør vi så kun hvis værdien er over 20
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  if (element.style.opacity > 20){element.style.opacity = newOpVal;}

jeg piller ikke ved andre linjer, så rutinen tæller ned til 0 alligevel, og stopper så der. Det kan være, at de to første skift fra 0 til 20 kan rettes tilbage igen.
Avatar billede deamill Nybegynder
14. december 2010 - 08:43 #4
@claes57

Fik det til at virke, svarer du lige?

:-)
Avatar billede claes57 Ekspert
14. december 2010 - 10:30 #5
bare behold point (læg et svar selv) - jeg har gaflet koden til eget brug, så jeg har allerede fået noget ud af det.
Avatar billede deamill Nybegynder
14. december 2010 - 10:59 #6
ok, men tak for input :-)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester