✔ Aus und einfaden eines Bildes

Hi

ich hab jetzt mal eine StoppFunktion mit eingebaut ;)
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Tutorials.de</title>
    <script type="text/javascript">
    var stop = false;
    function fadeIn(id, opacity){
      if( stop ){
        stop = false;
        return;
      }
      obj = document.getElementById(id);
      if( obj ){
        if( obj.style.opacity == 1 ){
          return;
        }
        opac = opacity+0.05;
        obj.style.opacity = opac;
        setTimeout("fadeIn('"+id+"', "+opac+")", 80);
      }
    }
    function fadeOut(id, opacity){
      if( stop ){
        stop = false;
        return;
      }
      obj = document.getElementById(id);
      if( obj ){
        if( obj.style.opacity == 0 ){
          return;
        }
        opac = opacity-0.05;
        obj.style.opacity = opac;
        setTimeout("fadeOut('"+id+"', "+opac+")", 40);
      }
    }
    function stopFading(){
      stop = true;
    }
    </script>
  </head>
  <body>
    <a href="#" style="display:inline;" onmouseover="fadeIn('fadein', 0);" onmouseout="stopFading();">Rein</a> <a href="#" style="display:inline;"  onmouseover="fadeOut('fadein', 1);" onmouseout="stopFading();">Raus</a>
    <div id="fadein" style="background-color: #f00;opacity: 1;">Hallo Welt!</div>
  </body>
</html>
 
Hmm.. geht das nicht alles in einer funktion? Das würde glaube ich alle meine probleme lösen. Müsste doch nur in eine while schleife und danach der Bidlwechsel und dannhalt wieder der fadein... wenn ich nur wüsste wie eine whileschleife geht und dass das js kurz "wartet"...
 
Ich würde keine While-Schleife empfehlen, denn das stoppt den ganzen Browser und verschwendet Rechenzeit!
 
Wie kann ich es dann in einer FUnktion nacheinander ausführen? So blintk es nämlich ziemlich komisch und auch das Bild wechselt noch vor dem ausfaden...
 
Hmm.. Also in einer Funktion ist es garnicht möglich? Ich weiß nicht wie ich es machen soll. Er soll ja ausfaden, ein neues Bild in den Header reinladen und dann wieder einfaden, Mache ich bedies getrennt und "nacheinander" wird das Bild aber sofort gewechselt nicht erst nach dem ausfaden. Ich probiere einfach bisschen rum, ich werde ja dann merken ob es funktioniert. Wer noch Tipps hat, bin gerne offen dafür.
 
Ich wiederhol mich ja nur ungern aber
*vorkau*
Javascript: 
function headerSwap(target, url){
 headerImg = $('#header').css('backgroundImage');
 newImg = 'url("'+url+'")';
 if(headerImg != newImg){
    $('#header').fadeOut('slow',function(){
        $('#header').css('backgroundImage', newImg).fadeIn('slow');
    });
 }
}
HTML: 
<a href="index.php?portal=serie" onmouseover="headerSwap(this,'img/serie.png');">Serien</a>
 <a href="index.php?portal=movie" onmouseover="headerSwap(this,'img/movie.png');">Filme</a>

Und sag mir nicht es geht nicht. Ich habs gerade auf deiner Seite getestet :p
 
jQuery? War eigentlich meine Notlösung wenn ich es nicht anders hinbekomme!
Habe aber nun foglendes versuch:

Javascript: 
function fadeOut(id, opacity, imgPortal){
     obj = document.getElementById(id);
      if( obj ){
        if( obj.style.opacity == 1 ) {fadeIn(id, 1, imgPortal)}
        if( obj.style.opacity == 1 )
          return;
        opac = opacity+0.05;
        obj.style.opacity = opac;
        setTimeout("fadeIn('"+id+"', "+opac+")", 40);

      }
 }
 function fadeIn(id, opacity, imgPortal){
   obj.style.background = "no-repeat url(\'img/"+imgPortal+".png\')";
 if( obj ){
        if( obj.style.opacity == 0 )
          return;
        opac = opacity-0.1;
        obj.style.opacity = opac;
        setTimeout("fade('"+id+"', "+opac+")", 40);
      }
    }
}

rd4eva, Ok, ich nehm jQuery. Danke fürs "vorkauen", und auch danke an timestamp!

//Edit: FUnktioniert perfekt, Dickes danke! *Buttons nutz*
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück