ilch Forum » Allgemein » HTML, PHP, SQL,... » [JS] FadeIn und FadeOut "umdrehen"

Geschlossen
  1. #1
    User Pic
    iVirus Mitglied
    Registriert seit
    28.07.2008
    Beiträge
    1.248
    Beitragswertungen
    30 Beitragspunkte
    Hey - undzwar wird mein problem so einfach wie primitiv sein,
    bei meinem kleinen js (ausm netz) gehts um folgende funktion

    ----------
    Mein Problem ist:
    die DIV wird angezeigt, und nach dem Event -> onClick wird sie ausgeblendet, ich will aber das die div ausgeblendet ist und erst nach dem klick erscheint, also quasi genau andersrum!
    ----------

    wenn ich auf den link drücke, erscheint...
    <a href="#" onClick="fade('fadeBlock');">Zeige text an!</a>


    ...diese DIV im content
    <div id="fadeBlock" style="background-color:black;width:250px;height:65px;text-align:center;overflow:auto"></div>


    Javascript-Datei
    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);
    }
    twitter: @michaelzoidl
    email: hi@michaelzoidl.com
    web: www.michaelzoidl.com
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Son!c Hall Of Fame
    Registriert seit
    14.09.2006
    Beiträge
    3.766
    Beitragswertungen
    5 Beitragspunkte
    ein display:none; würde da wahrscheinlich helfen.

    aber wieso machst du es dir so umständig und benutzt nicht einfach jquery, mootools, ...?
    Nimm das Leben nicht zu ernst, du kommst sowieso nicht lebend raus.
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    iVirus Mitglied
    Registriert seit
    28.07.2008
    Beiträge
    1.248
    Beitragswertungen
    30 Beitragspunkte
    bei display:none; wirds aber komplett ausgeblendet - es soll ja dan erscheinen wenn der link gedrückt wird..

    lächeln da ich leider relativ wenig ahnung hab was jQuery etc. hab traurig
    twitter: @michaelzoidl
    email: hi@michaelzoidl.com
    web: www.michaelzoidl.com
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    iVirus Mitglied
    Registriert seit
    28.07.2008
    Beiträge
    1.248
    Beitragswertungen
    30 Beitragspunkte
    oh, muss mich entschuldigen - ich code es doch lieber selber lachen hab mich kurz in jQuery reingelesen oO ist gar nich so schwer..

    thx @freak api.jquery.com/fadeIn/
    twitter: @michaelzoidl
    email: hi@michaelzoidl.com
    web: www.michaelzoidl.com
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten