mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 15:04 Benutzername: Passwort: Auto-Login

Thema: JavaScript fade out verzögern vom 21.04.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> JavaScript fade out verzögern
Autor Nachricht
nonblank
Threadersteller

Dabei seit: 06.02.2005
Ort: -
Alter: 43
Geschlecht: Männlich
Verfasst Sa 21.04.2007 07:50
Titel

JavaScript fade out verzögern

Antworten mit Zitat Zum Seitenanfang

Hallo Leute,
habe ein Problem dessen Lösung mir einfach nicht einfallen will.
Und zwar handelt es sich um dieses Skript:
Code:

<script type="text/javascript">
                  <!--
                     function papersheetnavi(imgcase)
                     {
                        var ic=document.getElementById("imagecontainer");
                        // wenn ein Bild da ist, wenn die Funktion wiederholt
                        // aufgrufen ist, wird dieses entfernt
                        for(i=1;i<11;i++){
                           var bild_id="referenz"+i;
                           bild_weg=document.getElementById(bild_id);
                           if    (bild_weg!=null){
                              ausblenden();
                              i=11;
                           }
                        }
                        // vorhandene Bilder setzen und Attribute hinzufügen
                        img_now="bilder/referenzen/bild"+String(imgcase)+".jpg";
                        var dyn_img=document.createElement("img");
                        dyn_img.setAttribute("src",img_now);
                        dyn_img.setAttribute("title","Referenz"+imgcase);
                        dyn_img.setAttribute("id","referenz"+imgcase);
                        ic.appendChild(dyn_img);
                        return bild_weg;
                     }
                     
                     function ausblenden()
                     {
                        for (i=1;i>=0.1;i-=0.1) {
                           bild_weg.style.opacity = i;
                        }
                        document.getElementById("imagecontainer").removeChild(bild_weg);
                     }
                                                      // -->
                       </script>



Die Funktion ausblenden soll zeitverzögert aufgerufen werden und erst dann soll das Bild entfernt werden, das selbe Problem erwartet mich sicher noch einmal beim Fade in...
Evtl. kann mir ja jmd. mal einen Denkanstoss geben?! * Keine Ahnung... *
  View user's profile Private Nachricht senden
therapiekind

Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
Verfasst Sa 21.04.2007 09:15
Titel

Antworten mit Zitat Zum Seitenanfang

setTimeout ist dein Freund. Auf http://www.w3schools.com/js/js_timing.asp findest du ein paar Beispiele.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
nonblank
Threadersteller

Dabei seit: 06.02.2005
Ort: -
Alter: 43
Geschlecht: Männlich
Verfasst Sa 21.04.2007 09:49
Titel

Antworten mit Zitat Zum Seitenanfang

Das es die Funktionen setTimeout und setInterval gibt weiß ich auch, aber wie müsste man sie in diesem Fall anwenden?
die Opazitätverringerung in eine Funktion auslagern oder wie? Ich hab gelesen das man auch Anweisungen direkt in das setIntervall schreiben kann... funzt aber in meinem Fall nicht - bekomme den Fehler bild_weg is not defined und alpha is not defined Hä?

Code:
<script type="text/javascript">
                  <!--                     
                     function papersheetnavi(imgcase, ak)
                     {
                        var ic=document.getElementById("imagecontainer");
                        // wenn ein Bild da ist, wenn die Funktion wiederholt
                        // aufgrufen ist, wird dieses entfernt
                        for(i=1;i<11;i++){
                           var bild_id="referenz"+i;
                           bild_weg=document.getElementById(bild_id);
                           if    (bild_weg!=null){
                              var alpha = i/10;
                              var tp = setInterval("bild_weg.style.opacity = alpha",100);
                              if (alpha == .1) {
                                 document.getElementById("imagecontainer").removeChild(bild_weg);
                                 clearInterval(tp);
                                 i=11;
                              }
                           }
                        }
                        // vorhandene Bilder setzen und Attribute hinzufügen
                        img_now="bilder/referenzen/bild"+String(imgcase)+".jpg";
                        var dyn_img=document.createElement("img");
                        dyn_img.setAttribute("src",img_now);
                        dyn_img.setAttribute("title","Referenz"+imgcase);
                        dyn_img.setAttribute("id","referenz"+imgcase);
                        ic.appendChild(dyn_img);
                        return bild_weg;
                     }
                  // -->


Nochmals überarbeitet - gibt jetzt keine Fehlermeldung mehr ... aber auch kein Ergebnis
Code:
<!-- Linke Seite -->
                <div id="part_left">
                    <img src="bilder/header.jpg" />
               <!-- Referenzgalerie -->
                    <div id="display">
                  <script type="text/javascript">
                  <!--                     
                     function papersheetnavi(imgcase, ak)
                     {
                        var ic=document.getElementById("imagecontainer");
                        // wenn ein Bild da ist, wenn die Funktion wiederholt
                        // aufgrufen ist, wird dieses entfernt
                        for(i=1;i<11;i++){
                           var bild_id="referenz"+i;
                           bild_weg=document.getElementById(bild_id);
                           if    (bild_weg!=null){
                              var alpha = i/10;
                              var tp = setInterval(""+bild_weg+".style.opacity = "+alpha+"",1000);
                              if (alpha == .1) {
                                 ic.removeChild(bild_weg);
                                 clearInterval(tp);
                                 i=11;
                              }
                           }
                        }
                        // vorhandene Bilder setzen und Attribute hinzufügen
                        img_now="bilder/referenzen/bild"+String(imgcase)+".jpg";
                        var dyn_img=document.createElement("img");
                        dyn_img.setAttribute("src",img_now);
                        dyn_img.setAttribute("title","Referenz"+imgcase);
                        dyn_img.setAttribute("id","referenz"+imgcase);
                        ic.appendChild(dyn_img);
                        return bild_weg;
                     }
                  // -->


Zuletzt bearbeitet von nonblank am Sa 21.04.2007 09:55, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
therapiekind

Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
Verfasst So 22.04.2007 00:22
Titel

Antworten mit Zitat Zum Seitenanfang

Warum die beiden Variablen nicht existieren, weiß ich nicht. Mal probiert, die über 'n alert() auszugeben?
Zu mehr reicht's gerade nicht, es fehlt der ganze Kontext, um das Skript richtig unter die Lupe nehmen zu können.

Ich würde sowieso empfehlen, irgend'n JavaScript-Framework dafür zu verwenden (mootools oder Prototype inkl. Scriptaculous oder so). Warum das Rad neu erfinden?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Fade in / out mit Javascript bei Rollover
Javascript Hyperlink Fade // Slide Effekt
Flash 8 // fade in/fade out // ActionScript Problem
tweens verzögern
opacity Fade-in Fade-out
Bilder-Fade
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.