✔ Aus und einfaden eines Bildes

S

styler2go

Erfahrenes Mitglied
Hallo!

Ich denke diese frage gibt es öfters, wurde aber weder in Google, noch hier über die Suche fündig.
Ich habe folgendes vor:

Ich habe einen header, der bei Mouseover über ein div das Bild wechselt. Nun möchte ich aber hinzufügen dass es eben "ausfadet" und mit dem neuen Bild wieder einfadet.
Kann mir da jmd. helfen? jQuery zbs. ist schon integriert, weiß aber nicht wie das zu verwenden ist ("jquery-1.2.6.pack" habe gelesen damit soll es möglich sein)

Kann mir da bitte jemand helfen?
 
Hi

du könntest den opacity-Wert des Bildes mit einem Timer erhöhen bzw erniedrigen. Das sollte den gewünschten Effekt erzielen.
 
Hi

das ist jetzt zwar nicht JQuery, aber ich hab das mal grad zum Spaß geschrieben:

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">
    function fadeIn(id, opacity){
      obj = document.getElementById(id);
      if( obj ){
        if( obj.style.opacity == 1 )
          return;
        opac = opacity+0.05;
        obj.style.opacity = opac;
        setTimeout("fadeIn('"+id+"', "+opac+")", 40);
      }
    }
    </script>
  </head>
  <body onload="fadeIn('fadein', 0);">
    <div id="fadein">Hallo Welt!</div>
  </body>
</html>
 
Jquery fadeOut() hat eine callback function die ausgeführt wird sobald fadeOut() fertig ist.
D.h. folgendes wäre möglich:

Javascript: 
$('img').mouseenter(function(){
    $(this).fadeOut('slow', function(){
       $(this).attr('src','neue url').fadeIn('slow');
    });  
});
 
Für das Fadeout kannst du die Funktion kopieren (und umbennen). Als Startwert musst du lediglich 1 angeben, die 2te if Bedingung muss prüfen ob der Wert = 0 ist und der Variable opac muss 0.05 vom OpacityWert abgezogen werden ;)
 
Also habe ich nun
Javascript: 
 function fadeOut(id, opacity){
      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);
      }
    }

Funktioniert aber leider (noch) nicht richtig...

//Edit:

Funktioniert schon,allerdings blintk es sehr komisch!

http://server.dyndns.tv/star/ <- Da kann man sich das mal angucken, oben "Serien" und "Filme" Ändern den Header

Folgende Idee:

Ich möchte das ausfaden, bild wechseln, und einfaden in eine funktion tun die nacheinander ausgeführt wird, kann ich die funktionen eifnach miteinander "verschmelzen" oder gitb das probleme?

Nun habe ich das Problem, dass er anscheinend das Fadeout und FadeIn gleichzeitig ausfährt, was ich auch nachvollziehen kann weil es ja nun keinen Stopp mehr zwischen den ein und ausfaden gibt. gibt es eine möglichkeit da szbs. in einer schleife zu lösen ?

Javascript: 
 function fade(id, opacity, imgPortal){
      obj = document.getElementById(id);
      if( obj ){
        if( obj.style.opacity == 1 )
          return;
        opac = opacity+0.1;
        obj.style.opacity = opac;
        setTimeout("fade('"+id+"', "+opac+")", 40);
      }
  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);
      }
    }
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück