[JavaScript] Fade In - Beschreibung über Bild

Stegaa · 24. Januar 2010

Fade In - Beschreibung über Bild

Guten tag,
bin auf der Suche nach einem Script. Und zwar soll per "Fade In" eine kleine Beschreibung auf einem transparenten Hintergrund eingeblendet werden, sobald ich über das Bild mit der Maus gehe.

Soll halt als kleines Showcase für ein Portfolio dienen, Bilder sollten auch verlinkt werden können,aber das ist ja kein Problem. Über google hab ich nichts gefunden, kann mir hier jemand weiterhelfen?

Anzeige

onip · 25. Januar 2010

AW: Fade In - Beschreibung über Bild

http://demos.mootools.net/Effects

anstatt auf ein click event, setzt du einfach ein mouseover event.
ist recht einfach

Hadean · 25. Januar 2010

AW: Fade In - Beschreibung über Bild

Kann Mootools auch nur empfehlen, wenn das etwas striktere Coding auch nich jedermanns Sache ist, funktionierts meist etwas besser wie das chaining mit jquery auch wenns gehyped wird ohne Ende

hacker5 · 25. Januar 2010

AW: Fade In - Beschreibung über Bild

Falls du kein Framework benutzt und weiterhin keins benutzen willst, gibt es das auch einfache als Funktion. Du kannst sie dir auch aus den Frameworks "klauen" oder sowas nutzen. Ist recht simpel. Die opacity wird einfach via Timeout langsam runtergefahren oder hochgefahren.

Das Script nervt nochnichtmal so rum wie Scriptaculous appear und fade effekt.

Murdoc · 25. Januar 2010

AW: Fade In - Beschreibung über Bild

ich versteh ned warum manche leute für solche sachen immer timeouts nehmen.

HTML:

<html>
<head>
 <script type="text/javascript">
 var ie = window.attachEvent && !window.opera;

 var setop = (ie ? function(e, op) {
 o = parseInt(op * 100);
 
 if(o == 100) {
 try { 
 e.style.removeAttribute("filter");
 e.style.removeAttribute("-ms-filter");
 } catch(e) {
 //ignore
 } finally {
 return;
 }
 }
 
 var cs = e.currentStyle;
 if((cs && !cs.hasLayout) 
 || (!cs && e.style.zoom == 'normal'))
 e.style.zoom = 1;
 
 e.style["-ms-filter"] = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + o + ")"
 e.style.filter = 'alpha(opacity=' + o + ')';
 } : function(e, op) {
 e.style["-moz-opacity"] = op;
 e.style.opacity = op;
 });

 function fade(e) {
 var e = document.getElementById(e);
 var o = 1.0;
 var i = window.setInterval(function() {
 if((o -= .1) <= 0.1) {
 e.style.display = "none";
 setop(e, 0);
 window.clearInterval(i);
 return;
 }
 
 setop(e, o);
 }, 60);
 }

 function appear(e) {
 var e = document.getElementById(e);
 var o = .0;
 setop(e, o);
 e.style.display = "";
 
 var i = window.setInterval(function() {
 if((o += .1) >= 0.9) {
 setop(e, 1);
 window.clearInterval(i);
 return;
 }
 
 setop(e, o);
 }, 60);
 }

 function toggle(e) {
 var el = document.getElementById(e);
 if(el.style.display == "none")
 appear(e);
 else fade(e);
 }
 </script>
</head>
<body>
 <p style="border:4px solid #b00000;padding:10px;" id="fade_element">Fade me</p>
 <p><a onclick="toggle('fade_element'); return false;" href="#">do it!</a></p>
</body>
</html>

hacker5 · 26. Januar 2010

AW: Fade In - Beschreibung über Bild

Ich glaub die meisten wissen wohl gar nicht, dass es auch was anderes außer den Timeouts gibt (kein Wunder wenn man sich nicht mal bisschen durchliest^^) oder haben absolut keine Ahnung wo der Unterschied liegt.

Das was ich gefunden hatte, war nur das einzige was so auf anhieb beim Suchen funktionierte.

Nützliche Suchen

[JavaScript] Fade In - Beschreibung über Bild

Videos zum Themenbereich