[FRAGE] Schleife?

[Heinz91]

Hallo zusammen,

bin neu hier, auch deshalb, weil ich gerade erst mit JavaScript begonnen habe.
So bin ich schon auf das erste Problemchen gestoßen, was für die Erfahrenen unter euch wohl keines sein wird.
Hab bereits rumgesucht und mich auch mit Tutorials beschäftigt, finde irgendwie aber nicht die richtige Lösung, sodass es funktioniert. Wäre deshalb für eure Hilfe sehr dankbar.

Thematik:
30 Punkte sollen nacheinander eingeblendet werden, woraus ich nun eine Schleife machen möchte:

$(document).ready(function(){
$("#dot1").css("display","none");
setTimeout(function()
{
$("#dot1").fadeIn(1000);
}, 100);
});

... 30x bis:

$(document).ready(function(){
$("#adot30").css("display","none");
setTimeout(function()
{
$("#adot30").fadeIn(1000);
}, 3000);
});

1) Die ID #dot1 soll raufzählen bis #dot30
2) Der Wert von 100 soll jeweils um 100 erhöht werden.

Vielen Dank im Voraus.
Gruß,
Heinz

 

[kkapsner]

Was hast du denn probiert? Wo liegt denn genau das Problem?

An sich ist in JS eine Schleife nicht so schwer:

for (var i = 1; i <= 30; i += 1){
	...
}

Hier bei musst du nur mit anonymen Funktionen (wie die, die du an window.setTimeout() übergibst) aufpassen, da Variablen darin nicht nach dem Wert, den sie beim Erzeugen der Funktion hatten, sondern direkt referenziert werden. Du musst also für dein Timeout die Variable nochmal kapseln:

for (var i = 1; i <= 30; i += 1){
	(function(i){
		window.setTimeout(...);
	}(i));
}

 

[Heinz91]

Hallo,

habe lange damit rumprobiert ... Versuch 1:

for (var dotID = 1, zeit = 100; dotID <= 30; dotID++, zeit = zeit + 100) {
     adot = "#adot" + dotID;

     $(document).ready(function(){
     $("adot").css("display","none");
     setTimeout(function()
     {
     $("adot").fadeIn(1000);
     }, zeit);
     });

     Ausgabe = '<div id="adot"' + dotID + '"><img src="adot01.jpg"><\/div>';
     document.write(Ausgabe);
}

Die Schleife funktioniert wunderbar und gibt 30x die richtigen Werte aus.
Allerdings funktioniert das verzögerte Einblenden nicht.
Ich nehme an, es handelt sich um die Syntax bei den Variablen adot und zeit im mittlerein Teil.

Hab schon gegoogelt, aber noch nichts gefunden, wie man in dieses Script Variablen einfügen kann.

 

[s4ty]

Ohne Timeout sondern mit Callback.

http://jsbin.com/sunumomapexo/1/edit

$(function(){

  $("[id^=dot]").hide();

  myFade($('#dot1'), 0);
  
  function myFade($ele, i) {
    $ele.fadeIn(1000, function () {
      ++i;
      myFade($('#dot'+i), i);
    });
  }

});

 

[Heinz91]

Hallo s4ty,
vielen Dank für deine Antwort.
Verzeih mir nun meine blöde Frage - bin noch Anfänger:
Aber wie binde ich das richtig in den obigen Code ein?
Habe schon rumprobiert - gelingt mir aber nicht.

 

[s4ty]

Na du kannst deinen Code komplett tauschen gegen meinen, achte nur darauf das der Selektor passt ich sehe gerade das du #dot1 und #adot30 hast. in meinen Example gehe ich davon aus das die Ids wie folgt heißen:

#dot1, #dot2, ... bis #dot30 und nicht #adotX

- - - Aktualisiert - - -

http://jsbin.com/sunumomapexo/1/edit
Am besten du baust noch eine Abbruchbedingung ein:

$(function(){

  $("[id^=dot]").hide();

  myFade($('#dot1'), 0);

  function myFade($dot, i) {
    $dot.fadeIn(1000, function () {
      ++i;
      var $nextDot = $('#dot'+i);
      if($nextDot.length > 0) {
        myFade($nextDot, i);
      }
    });
  }

});

 

[Heinz91]

Am besten du baust noch eine Abbruchbedingung ein:

Juhuuuuu! Danke!
Damit funktioniert es nun wunderbar - genau so, wie ich es mir vorstellte. :icon7:

Nochmals vielen Dank für die Hilfe!

Gruß,
Heinz

 

[kkapsner]

@s4ty: mit Callback ist das aber nicht der gewünschte Effekt (so wie ich das verstanden hab'), da die Effekte ja teilweise gleichzeitg laufen sollen (100ms Zeitdifferenz aber 1000ms Effektdauer).

@Heinz91: dein Versuch 1 ist nicht so schlecht, aber du musst als Selektor natürlich die Variable adot nehmen und nicht den String "adot". Außerdem gilt es meinen zweiten Punkt zu beachten.

 

[Heinz91]

@kkapsner
Ja, die Zeitdifferenz bzw. die Effektdauer ist verloren gegangen.

Zu meinem Versuch 1 ... bei der Variable hatte ich alle nur erdentlichen Möglichkeiten ;-)
$("adot")
$('adot')
$(adot)
$adot
adot
usw.
Hat aber nichts bewirkt.
Ebenso bei der Variable zeit. Hat nie funktioniert.

Mit dem 2. Punkt habe ich auch rumprobiert, bin aber zu keinem Ergebnis gekommen.
Vielleicht hast du mir einen kleinen Tipp, was ich denn bei window.setTimeout(...); bei den 3 Punkten einfügen muss :icon7:

Zudem wäre mir die Variante bei meinem Versuch 1 schon lieber.
Denn ... das Ganze ist in eine Parallax-Scroll-down-Layout eingebunden, und die Punkte haben sich erst aufgebaut, als sie im sichtbaren Bereich waren, was auch der Sinn und Zweck ist. Nun jedoch bauen sie sich schon im nicht sichtbaren Bereich auf.

 

[j-l-n]

Hier bei musst du nur mit anonymen Funktionen (wie die, die du an window.setTimeout() übergibst) aufpassen, da Variablen darin nicht nach dem Wert, den sie beim Erzeugen der Funktion hatten, sondern direkt referenziert werden.

Mehr dazu in diesem ähnlichen Thema.

 

[kkapsner]

for (var i = 1; i <= 30; i += 1){
	(function(i){
    		 $(document).ready(function(){
    		 	var adot = $("#adot" + i);
     			adot.css("display","none");
			window.setTimeout(
				function(){
					adot.fadeIn(1000);
				},
				i * 100
			);
		});
	}(i));
}

- ungetestet.

 

[Heinz91]

Super!
Hab's gerade getestet und dein Skript funktioniert einwandfrei.
Nun lässt sich auch die Zeitdauer gut einstellen.

Vielen vielen Dank für die Mühe.
Gruß,
Heinz

 

[kkapsner]

Bitte - gern geschehen.