:)
Hallo Gemeinde,
ich baue gerade eine Flash-Datei in HTML mit Hilfe von jQuery nach und arbeite mich dafür in jQuery ein. Dabei möchte ich über geschachtelte Callback-Funktionen einen Schritt nach dem anderen ausführen. Das klappt auch im Prinzip, nach dem Ende meiner Anweisungen führt jQuery allerdings Schritte aus, die ich nicht „beauftragt“ habe.
Frage 1: Warum macht jQuery das?
Frage 2: Wie kriege ich das weg?
Der Quellcode steht unten. Das ganze Desaster – ein Durchlauf dauert ca. 50 Sekunden, dann wird der Fehler sichtbar.
Ich habe auch versucht, das mit queue()/dequeue() zu lösen, hab’s aber nicht hinbekommen.
Um uns allen Zeit zu sparen: Ich stelle eine ganze Reihe von Fragen NICHT, wie z.B. ...
Vielen Dank für jede Hilfe!
ich baue gerade eine Flash-Datei in HTML mit Hilfe von jQuery nach und arbeite mich dafür in jQuery ein. Dabei möchte ich über geschachtelte Callback-Funktionen einen Schritt nach dem anderen ausführen. Das klappt auch im Prinzip, nach dem Ende meiner Anweisungen führt jQuery allerdings Schritte aus, die ich nicht „beauftragt“ habe.
Frage 1: Warum macht jQuery das?
Frage 2: Wie kriege ich das weg?
Der Quellcode steht unten. Das ganze Desaster – ein Durchlauf dauert ca. 50 Sekunden, dann wird der Fehler sichtbar.
Ich habe auch versucht, das mit queue()/dequeue() zu lösen, hab’s aber nicht hinbekommen.
Um uns allen Zeit zu sparen: Ich stelle eine ganze Reihe von Fragen NICHT, wie z.B. ...
- „Wird das eine tolle Webseite?“ (ich denke, nein),
- „Ist das ein guter Entwurf? (nein, das geht besser)“,
- „Ist das ganz toller HTML/jQuery-Code?“ (sicher nicht) oder
- „Welchen Sinn hat das Ganze?“ (ich übe gerade jQuery).
Vielen Dank für jede Hilfe!
HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Callback-Test</title>
<meta name="description" content="descriptiondescriptiondescriptiondescription">
<meta name="author" content="Vorname Nachname">
<meta name="keywords" content="keyword1 keyword2 keyword3">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/ico">
<script type="text/javascript" src="jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.text1-bild').fadeIn(2000,function() {
$('.text1-zeile1').fadeIn(1500,function() {
$('.text1-zeile2').fadeIn(1500,function() {
$('.text1').delay(4000).fadeOut(100, function() {
$('.text2-bild').fadeIn(2000,function() {
$('.text2-zeile1').fadeIn(1500,function() {
$('.text2-zeile2').fadeIn(1500,function() {
$('.text2').delay(4000).fadeOut(100, function() {
$('.text3-bild').fadeIn(2000,function() {
$('.text3-zeile1').fadeIn(1500,function() {
$('.text3-zeile2').fadeIn(1500,function() {
$('.text3').delay(4000).fadeOut(100, function() {
$('.text4-bild').fadeIn(2000,function() {
$('.text4-zeile1').fadeIn(1500,function() {
$('.text4-zeile2').fadeIn(1500,function() {
$('.text4').delay(4000).fadeOut(100, function() {
$('.text5-zeile1').fadeIn(1500,function() {
$('.text5-zeile2').fadeIn(1500,function() {
$('.text5').delay(4000).fadeOut(100, function() {
$('.text6-zeile1').fadeIn(1500,function() {
$('.text6-zeile2').fadeIn(1500,function() {
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
</script>
</head>
<body>
<div class="wrap">
<p class="text1 zeile1 text1-zeile1">Hier steht Text 1 Zeile 1,</p>
<p class="text2 zeile1 text2-zeile1">Text 2 Zeile 1 folgt darauf,</p>
<p class="text3 zeile1 text3-zeile1">Schon kommt Text 3 Zeile 1,</p>
<p class="text4 zeile1 text4-zeile1">Text 4 Zeile 1 kommt natürlich auch,</p>
<p class="text5 zeile1 text5-zeile1">Man hat es fast geahnt: Text 5 Zeile 1 kommt unweigerlich,</p>
<p class="text6 zeile1 text6-zeile1">Dann folgt<br />eine Liste<br />mit ein paar<br />Zeilen,<br />irgendwas<br />Aufgezähltes<br />eben.</p>
<img class="text1 bild text1-bild" src="images/bart.jpg" />
<img class="text2 bild text2-bild" src="images/textil.jpg" />
<img class="text3 bild text3-bild" src="images/aktien.jpg" />
<img class="text4 bild text4-bild" src="images/bananen.jpg" />
<p class="text1 zeile2 text1-zeile2">... dann kommt Text 1 Zeile 2.</p>
<p class="text2 zeile2 text2-zeile2">und Text 2 Zeile 1 lässt nicht lange auf sich warten.</p>
<p class="text3 zeile2 text3-zeile2">Text 3 Zeile 2 folgt auf dem Fuße.</p>
<p class="text4 zeile2 text4-zeile2">genau wie Text 4 Zeile 2.</p>
<p class="text5 zeile2 text5-zeile2">ebenso wie Text 5 Zeile 2.</p>
<p class="text6 zeile2 text6-zeile2">Hiermit sollte die Animation beendet sein. Aber sie läuft weiter. Warum?</p>
<div class="footer">
<a href="#">Vorname Nachname</a> <a href="#">Kontakt</a> <a href="#">Impressum</a>
</div>
</div>
</body>
</html>
