Avatar billede deamill Nybegynder
14. december 2010 - 19:16 Der er 1 kommentar og
1 løsning

Fade screen element ud/ind giver mudret tekst

Hej,

Jeg har et skørt problem med dette script som jeg har fundet på nettet.

Jeg bruger det til at fade et element ud og ind igen med.

Det virker sådan set fint, men nå jeg fader ind, altså kalder scriptet mens elementet er faded ud, så er det som om at teksten i min div ser lidt sløret ud, efter der er faded helt ind.

Trykker jeg F5, så ser alt normalt ud igen.

Er det mon fordi den ikke fader helt ind igen?

Er der evt. en måde jeg kan sikre mig på, at elementet er faded helt ind igen?

Første gang man kalder fade(eid), så fader den ud, kalder man funktionen igen, så fader den ind.

Her er 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 heinzdmx Nybegynder
14. december 2010 - 20:20 #1
Muligvis er det lidt for meget at ændre. Men jeg vil anbefale dig at kigge på javascript biblioteket jQuery.

Så kan det fades med følgende kode:

<script>
$(document).ready(function()
{

function fadeIn(eid)
{
// SET OPACITY TO 100%
$(""+eid).stop().animate({
opacity: 1.0 }, "slow");
}
function fadeOut(eid)
{
// SET OPACITY TO 50%
$(""+eid).stop().animate({
opacity: 0.5 }, "slow");
}
}
</script>

Eksempel kan ses her:
http://www.hv-designs.co.uk/2010/01/13/learn-how-to-add-a-jquery-fade-in-and-out-effect/

Bemærk at du skal angive jQuery.js
Det fylder 64 kb så ikke det store og gør mange ting nemmere. Bland andet animationer.
Avatar billede deamill Nybegynder
22. marts 2011 - 12:52 #2
Fejl i IE
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