JS: Bereich langsam ein/ausblenden

martinhahn90 · 10.05.2009

Servus =),

ich habe es mir zur Aufgabe gemacht, einen DIV-Bereich grundsätzlich sichtbar zu haben, bei einem Mouseout langsam auszublenden und bei einem erneuten Mouseover langsam einblenden zu lassen.

Nundenn, das ausblenden klappt schon wunderbar, dafür habe ich eine Funktion. Jedoch schaffe ich es einfach nicht, diese Funktion umzukehren, sodass der DIV sichtbar ist und (wenn sie gerade durch ein Mouseout ausgeblendet wurde) langsam wieder sichtbar wird.

Hier einmal der Link zu der Datei:

PS: Blend ist die Ausblendfunktion, Blendin sollte die Einblendfunktion sein...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml"> 
<head>  
<title>Blendeffekt Test</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<script language="javascript" type="text/javascript">  
function blend ( obj, percent ) { 
if( typeof percent == "undefined" ) { 
    percent = 100; 
    } 
    percent -= 5; 
    if( percent >= 0 ) { 
    obj.style.opacity = percent/100; 
    obj.style.filter = "Alpha(opacity="+percent+")";
    } 
    if( percent > -100 ) { 
    window.setTimeout(function() { blend( obj ,percent ); }, 50 ); 
    } 
}
function blendin ( obj, percent ) { 
if( typeof percent == "undefined" ) { 
    percent = 0; 
    } 
    percent += 5; 
    if( percent == 100 ) { 
    obj.style.opacity = percent -= 5; 
    obj.style.filter = "Alpha(opacity="+percent+")";
    } 
    if( percent > -100 ) { 
    window.setTimeout(function() { blend( obj ,percent ); }, 50 ); 
    } 
}


</script> 
</head> 

<body>  

<div style="height: 100px; background-color: #00f; text-align: center;padding-top: 50px;" onmouseout="blend(this);" onmouseover="blendin(this);"></div> 

</body> 

</html>

Grüße und Danke im Voraus,

Martin

ThalAMorgul · 11.05.2009

AW: JS: Bereich langsam ein/ausblenden

Hi.

Das Ausblenden klappt wunderbar?
Bei mir verschwindet der DIV unmittelbar nachdem ich mit der Maus drueberfahre, erscheint wieder wenn ich ihn mit der Maus verlasse und wird erst dann langsam ausgeblendet.

ueberfahre ich ihn ein zweites mal (in ausgeblendetem zustand) mit der maus, so passiert nix. zumindest bis ich ihn wieder verlasse. dann taucht er auf einmal ohne blending wieder auf und wird dann automatisch von neuem ausgeblendet.

Firefox 3.0.10

Bei solchen Arbeiten wuerde ich stets mit nem entsprechenden Framework arbeiten.
MooTools verrichten einen ausgezeichneten Job, aber auch JQuery ist sehr zu empfehlen (von der Groesse nehmen die sich beide nich viel, zumal du eigene Konfigurationen zusammenstellen kannst, um nur die sachen zu haben, die du auch wirklich brauchst).

Dann hast du crossbrowser kompatibilitaet und dein code ist ca. zwei zeilen lang.
Macht aber wohl nur Sinn, wenn Du das Framework noch fuer andere Zwecke auf Deiner Seite verwenden willst. Nur fuer einen Ausblend-Effekt waere der Traffic wohl zu hoch.

Noch was zu Deinem Code:
Wenn Du XHTML-konform arbeiten willst, solltest Du dir mal die entsprechenden spezifikationen anschauen.
das language="" attribute z.B. in <script>'s ist deprecated. also raus damit.

martinhahn90 · 11.05.2009

AW: JS: Bereich langsam ein/ausblenden

Danke für deine Antwort. Da ich erst einmal nur diesen Effekt haben möchte, brauche ich das Framework wohl nicht.
Der Haken ist: Der Mouseout-Effekt klappt so, wie es sein soll, jedoch klappt die Umkehrfunktion nicht (Mouseover). Gehe ich mit der Maus drüber und das Teil ist schon eingeblendet (if opacity == 100) dann soll er auch bei 100 beiben. Ist die Opacity aber bei 0, so soll er langsam in +5er Schritten bis 100 gehen und dort anhalten, bis ich eben den Verschwindeeffekt dank Mouseout habe. =)

ThalAMorgul · 11.05.2009

AW: JS: Bereich langsam ein/ausblenden

Nur weil der Effekt bei Dir korrekt dargestellt wird, muss er nicht bei jedem Besucher Deiner Seite richtig sein.

Jeder Browser - vorallem halt der Internet Explorer - definiert manche Sachen auf seine ganz eigene Weise, weshalb Du in dieser Hinsicht stets vorsichtig sein solltest.

Und ich bin fast sicher, dass der Effekt so, wie er bei mir dargestellt wird, von dir nicht gewollt ist ^^

Welchen Browser verwendest Du denn ?

martinhahn90 · 11.05.2009

AW: JS: Bereich langsam ein/ausblenden

Ich selber surfe im neuesten Firefox.

Der Effekt ist nocht nicht fertig und sieht deswegen wohl verkehrt aus, habe es nämlich ebenso im neuen IE getestet. Was mit dem IE6 ist, das weiß ich jedoch zugegebenermaßen nicht.

Um Klarheit zu schaffen und damit wir alle auf dem gleichen Wissensstand sind, wie der Effekt momentan aussieht (^^):

Phase 1 - Aufruf der Seite -> Man sieht einen blauen Balken, nichts passiert
Phase 2 - MouseOver -> Man sieht weiterhin einen blauen Balken, nichts passiert
Phase 3 - MouseOut -> Langsam verschwindet der blaue Kasten
Phase 4 - MouseOver 2 -> Es bleibt weiß, nichts ist da
Phase 5 - MouseOut 2 -> Kurz erscheint der blaue Balken, bevor er dann langsam wieder verschwindet

So sieht der Effekt derzeit aus. So soll er natürlich nicht sein, wenn er fertig ist. Der Part des MouseOver passt nämlich noch nicht (die zweite JS-Funktion im Dokument, blenin genannt).
Es soll später so sein:

Phase 1 - Aufruf der Seite -> Man sieht einen blauen Balken, nichts passiert
Phase 2 - MouseOver -> Man sieht weiterhin einen blauen Balken, nichts passiert
Phase 3 - MouseOut -> Langsam verschwindet der blaue Kasten
Phase 4 - MouseOver 2 -> Langsam erscheint der blaue Kasten wieder
Phase 5 - MouseOut 2 -> Langsam verschwindet der blaue Kasten wieder

An den fett markierten Stellen hapert es derzeit. :'(

Grüße,

Martin

Edit:
Jetzt habe ich es immerhin hinbekommen, dass beim ersten Hover nichts passiert, der blaue Kasten also blau bleibt. Nun muss ich nur noch schaffen, dass bei einem erneuten Hover die Sichtbarkeit von 0 langsam auf 100 gesetzt wird, dann ist es genauso, wie ich es haben will =)

cebito · 11.05.2009

AW: JS: Bereich langsam ein/ausblenden

Erstens ruft dein Timer beim Einblenden die falsche Function auf, mit noch ein paar kleinen Änderungen gehts dann. Brauchst noch eine Abfrage ob's schon zu sehen ist (für erstes mouseover)...

Code:

<script language="javascript" type="text/javascript">  
function blend ( obj, percent ) { 
if( typeof percent == "undefined" ) { 
    percent = 100; 
    } 
    percent -= 5; 
    if( percent >= 0 ) { 
    obj.style.opacity = percent/100; 
    obj.style.filter = "Alpha(opacity="+percent+")";
    } 
    if( percent > -100 ) { 
    window.setTimeout(function() { blend( obj ,percent ); }, 50 ); 
    } 
}
function blendin ( obj, percent ) { 
if( typeof percent == "undefined" ) { 
    percent = 0; 
    } 
    percent += 5; 
    if( percent <= 100 ) { 
    obj.style.opacity = percent/100; 
    obj.style.filter = "Alpha(opacity="+percent+")";
    } 
    if( percent < 100 ) { 
    window.setTimeout(function() { blendin( obj ,percent ); }, 50 ); 
    } 
}

Edit: Kleine Info, funzt auch in IE6.....

martinhahn90 · 11.05.2009

AW: JS: Bereich langsam ein/ausblenden

Danke, jetzt sehe ich auch einen großen Fehler von mir, ich Depp. :-(
War ja eigentlich vom Gedanken her gar nicht mehr so weit entfernt, lokal hatte ich schon einen halben Ansatz.

Jedoch kam mir nun ein neues Problemchen in die Quere, als ich es an den eigentlichen Verwendungsort übertragen habe:

Solange man sich nur kurz unter der Kamera bewegt (also im DIV, nicht aber über einem Bild, welches innerhalb des DIVS verlinkt ist), funktioniert es super. Wenn ich jedoch über ein Thumbnail fahre, wird der Effekt scheinbar noch einmal ausgeführt (weil ich hier einen neuen mouseover habe?!).
Kann man dieses Problem noch umgehen? :uhm:

ThalAMorgul · 11.05.2009

AW: JS: Bereich langsam ein/ausblenden

korrekt. das mouseover event wird iauf kind-elemente (in deinem fall n der tat die bilder des containers) vererbt. mootools z.B. schafft hier abhilfe =D ich sag's nur ^^

zur loesung und erfassung des problems kann ich dir folgende Seite ans herz legen. aber wirklich kompatibel und schoen ists afaik nich zu loesen.

martinhahn90 · 11.05.2009

AW: JS: Bereich langsam ein/ausblenden

hmmmm...blicke da leider Gottes nicht wirklich durch -.-*
Habe aber gerade überlegt, ob es nicht helfen könnte, wenn ich eine neue function erstelle, welche die Sichtbarkeit auf 100 stellt. Diese setze ich dann dem ul zu als onmouseover...

Edith sagt, dass es GRANDIOS nicht klappt! Jetzt ist sie furchtbar enttäuscht. Oh man ey, muss das denn so schwer sein?

ThalAMorgul · 12.05.2009

AW: JS: Bereich langsam ein/ausblenden

nein, muss es nicht.
was spricht gegen mootools oder jquery in nem entsprechenden build?

kannst dann direkt auch noch kinderleicht weitere dezente und nicht weniger ansehnliche effekte auf deiner seite einbauen.
Auch die verwendung von AJAX ist dann etwas, wovor man sich nicht mehr fuerchten braucht

martinhahn90 · 13.05.2009

AW: JS: Bereich langsam ein/ausblenden

Ja, gut, ähm. Überredet. Dann werde ich mich wohl ober übel mal mit den Frameworks beschäftigen müssen.

Mal sehen, was das gibt.