JavaScript jquery fadein - out loop - schleife

Teisi · 9. Oktober 2013

servus,
ich anfänger im web-programmieren, bzw. eigentlich überhaupt...

wäre sehr dankbar wenn mir da einer weiterhelfen könnte...

ich weiß es gibt diverse plugins etc. möchte es aber 1. selbst hin bekommen 2. brauch ich sowas für meinen abschluss und will das auch erklären können... etc. und schaden kanns ja nie...

vorab links und rechts sind vertauscht... da sich das layout geändert hat und ich zu faul was es umzubenennen...

problem:
2 bilder(div1+2) neben einander sollen möglichst gleichzeitig ausgefadet werden, wärend sie ausgefadet sind soll das href getauscht werden und gleichzeitg 2 andere bilder(div3+4) eingefadet werden... dann das ganze rückwärts...
nach jetzt ewigem tüfteln komm ich einfach ned darauf

wenn mir einer helfen könnte wäre das echt super! danke dafür!

sobald ich die seite aufrufe, wechselt er sofort moodright mit right1, links tut sich glaub ich garnix... zumindest stelle ich nichts fest. dann nach ner zeit wechselt er beide bilder ohne! zu faden sonder einfach zack und gewechselt. danach fadet er beide bilder wie gewollt aus, darauf folgt wieder ein zack bild wechsel und dann fängt alles von vorne an...

Code html:
<body id="body" onLoad="a()">
<div id="mood">
<div id="moodright"> 
<div id="moodrightpic"> <img src="Bilder/moodpicright1600.jpg" alt="picright" id="imgright" name="imgright"></div>
<div id="right1"><img src="Bilder/mood_1.png" alt="picright1" id="imgright1" name="imgright1"></div>
</div>
<div id="moodleft"> 
<div id="moodleftpic"> <img src="Bilder/moodpicleft1600.png" alt="picleft" id="imgleft" name="imgleft"> </div>
<div id="left1"> <img src="Bilder/moodpicleft1600.png" alt="picleft1" id="imgleft1" name="imgleft1"> </div>
</div>
</div>

Code css:
#moodleft {
position: relative;
clear: none;
float: left;
width: 30%;
display: block;
height: 100%;
}
#moodleftpic {
display: block;
position: relativ;
z-index: 10;
width: 100%;
height: auto;
overflow: hidden;
}
#moodright {
position: relative;
clear: both;
float: left;
width: 70%;
display: block;
height: 100%;
}
#moodrightpic {
display: block;
position: relativ;
z-index: 10;
width: 100%;
height: auto;
overflow: hidden;
}
#right1 {
width: 100%;
height: auto;
overflow: hidden;
position: absolute;
display: none;
top: 0%;
left: 0%;
z-index: 20;
}
#left1 {
width: 100%;
height: auto;
overflow: hidden;
position: absolute;
display: none;
top: 0%;
left: 0%;
z-index: 20;
}

JQuery:
var time = 12000; //Die Zeit wie lange ein Bild angezeigt wird in ms
var time1 = 12000;

var bild = new Array(); //rightpic
bild[1] = "Bilder/moodpicright1600.jpg"; //Deine Bilder (belibig erweiterbar)
bild[0] = "Bilder/mood_1.png";

var bild1 = new Array(); //leftpic
bild1[0] = "Bilder/moodpicleft1600.png"; //Deine Bilder (belibig erweiterbar)
bild1[1] = "Bilder/mood_2.png";

var bild2 = new Array(); //rightpic1
bild2[0] = "Bilder/moodpicright1600.jpg"; //Deine Bilder (belibig erweiterbar)
bild2[1] = "Bilder/mood_1.png";

var bild3 = new Array(); //leftpic1
bild3[1] = "Bilder/moodpicleft1600.png"; //Deine Bilder (belibig erweiterbar)
bild3[0] = "Bilder/mood_2.png";

var narf = "0";
var narf1 = "0";
var narf2 = "0";
var narf3 = "0";
a = function() {
$("#moodrightpic").fadeOut(6000).ready(function(e) {
$("#right1").fadeIn(6000).ready(function(e) {
$("#imgright").attr("src", bild[narf]);
narf++;
if (narf == bild.length) {
narf = 0;
}
});
});
$("#moodleftpic").fadeOut(6000).ready(function(e) {
$("#left1").fadeIn(6000).ready(function(e) {
$("#imgleft").attr("src", bild1[narf1]);
narf1++;
if (narf1 == bild1.length) {
narf1 = 0;
}
});
});
setTimeout("b()",time);
};

b = function() {
$("#right1").fadeOut(6000).ready(function(e) {
$("#moodrightpic").fadeIn(6000).ready(function(e) {
$("#imgright1").attr("src", bild2[narf2]);
narf2++;
if (narf2 == bild2.length) {
narf2 = 0;
}
});
});
$("#left1").fadeOut(6000).ready(function(e) {
$("#moodleftpic").fadeIn(6000).ready(function(e) {
$("#imgleft1").attr("src", bild3[narf3]);
narf3++;
if (narf3 == bild3.length) {
narf3 = 0;
}
});
});
setTimeout("a()",time1);
};

was ich auch ned so ganz verstehe ist, das ich die variablen 4 mal brauche... sobald ich versuche es mit jeweils einer zu machen... geht garnix mehr...

wäre euch echt dankbar, wenn mir da einer helfen könnte... thx

grüße
da Teisi

Nase · 9. Oktober 2013

Wenn ich es richtig verstanden habe, dann suchst du nicht

Code:

fadeIn().ready();

sondern

Code:

fadeIn(done = function() {});

Dass die Bilder direkt beim Aufruf der Seite getauscht werden, ist verständlich, denn schließlich rufst du das Script, bzw. die Funktion a, direkt beim Laden auf.

Beim letzten Absatz verstehe ich nicht, was du willst. Welche Variablen? Was tauschst du wie aus? Usw. usf.

Noch ein Gedanke: Bekomm dein CSS in den Griff.

DasBoeseLebt · 9. Oktober 2013

Ich hatte zuerst hier etwas böses stehen und habe dein Problem gelöst, dann hab ich mich entschlossen die Lösung als auch das Böse zu entfernen.
Warum? Weil ich deine Faulheit nicht unterstützen möchte.

Daher erstmal alles ordentlich machen, dann sehen wir weiter. (d.h. passe die CSS Sachen an, gib alles richtige Namen a,b, narf - was soll der Mist).

Bis morgen.

ps:
Editiere den Beitrag und wirf das meiste Raus. Schreib kurz, was nicht geht (wo du denkst warum nicht) und was eigentlich passieren soll.
Pack alles in eine Zip oder rar und lade es hoch, damit man nicht zu Hause (wie ich es schon getan hab) noch anlegen muss und noch formatieren muss(!). (index.html, style.css, script.js reichen ja, zur Not auch in einer Datei).

Nase · 9. Oktober 2013

Cool. Genau die Gedanken hatte ich auch und ich wollte sogar etwas Ähnliches schreiben. Habe es aber dann trotzdem versucht zu lösen, weil es mich selber interessiert hat.

Teisi · 10. Oktober 2013

servus,

danke für die antworten

muss zugeben am anfang war ich etwas enttäuscht, weil ich dacht das ich ja dazugeschrieben habe das ich blutiger noob bin...
aber dann, hab ich mich dran gehalten, und den arschtritt habe ich gebraucht... thx dafür an euch 2

jetzt hab ichs auch fast hinbekommen...
nur eins will einfach ned klappen: die bilder sollen immer eine gewisse zeit eingeblendet bleiben und nicht gleich wieder ausfaden...
wait(), delay(), settimeout(), ready(), irgendwas mach ich noch falsch...

ach ja, css is jetzt auch komprimiert oder optimiert worden...
die seite is ja noch lang ned fertig... nicht benötigten code rausschmeißen mach ich immer hinterher... is vielleicht falsch... naja

danke und grüße
da Teisi

Anhang Klick

Nase · 10. Oktober 2013

Hab ich doch schon geschrieben.

Teisi · 10. Oktober 2013

sry entweder ich steh schowieder aufm schlauch.... oder ich raffs einfach ned... sobald ich die idee von dir einpflanze... läufts garnichtmehr...

hab grad das ausprobiert... workt auch ned....:

$(function(){
var time = 6;
var interval = setInterval (b(), time*1000 );
b = function() { ...

Nase · 10. Oktober 2013

Du musst nur dein Script von oben nehmen und das daraus machen (so ähnlich hatte ich das zumindest gestern mal):

Code:

a = function() {
 $("#moodrightpic").fadeOut(6000, done = function() {
  $("#right1").fadeIn(6000, done = function() {
   $("#imgright").attr("src", bild[narf]);
   narf++;
   if (narf == bild.length) {
    narf = 0;
   }
  });
 });
};

Ansonsten mal in die jQuery-Dokumentation gucken, was .ready() macht, welche Optionen .fadeIn() und .fadeOut() alles hat.
Das, was du im Script in deinem Google Drive gemacht hast, kommt teilweise schon in Frage. Schmeiß den onLoad()-Befehl im <body> raus und setzt im Javascript eine Timeout, die nach Ablauf Funktion a aufruft.

DasBoeseLebt · 10. Oktober 2013

In deiner index.html sind folgende Fehler (oder nicht ganz valide Sachen oder Unsinn):

Unvollständiger/fehlerhafter Umgang mit dem HTML-Tag
Scripte außerhalb des head-Tags
Verwendung von onload im Body und gleichzeitig mit JQuery $(document).ready arbeiten
div_pic_left, div_pic_left1 sind nichtssagende Bezeichnungen, trifft aber eigentlich auf fast alles zu

script.js (erledigt sich aber durch meinen Code eh alles):

Globale Variablen unnötig
Uncaught ReferenceError: b is not defined
a und b sind keine geeigneten Bezeichnungen für Funktionen

index.css:

Hast vermutlich alles entfernt? ^^

Wirf das onload beim index.html raus
und ersetz dein imgchange3.js Code durch das hier:

Code:

(function () {
	$(document).ready(function () {
		setInterval(function () {
			if ( $("#div_pic_left").is(':visible') ) {
				$("#div_pic_left").fadeOut(6000);
				$("#div_pic_left1").fadeIn(6000);
				$("#div_pic_right").fadeOut(6000);
				$("#div_pic_right1").fadeIn(6000);
			} else {
				$("#div_pic_left1").fadeOut(6000);
				$("#div_pic_left").fadeIn(6000);
				$("#div_pic_right1").fadeOut(6000);
				$("#div_pic_right").fadeIn(6000);
			}
		}, 12000);
	});
})();

Rest mach mal soweit fertig und dann sehen wir weiter. Eigentlich müsstest du jetzt selbst weiterkommen, ansonsten fragen, fragen, fragen... auch, wenn du den Code nicht verstehst!

Nase · 10. Oktober 2013

Und du kannst die fadeIns und fadeOuts noch zu einem Statement zusammenfassen ... wenn wir hier schon bei Optimierungen sind

.

DasBoeseLebt · 10. Oktober 2013

Nase schrieb:
Und du kannst die fadeIns und fadeOuts noch zu einem Statement zusammenfassen ... wenn wir hier schon bei Optimierungen sind .

Optimierung? Naja, es soll dann halt auch halbwegs ordentlich sein und da der TE eh noch bisschen an den fade's rumfummeln muss (sourcen durchrotieren?), so übernommen.

Teisi · 11. Oktober 2013

danke euch,

natürlich ist das nicht valide... is ja auch nur so kurz zusammen gebastelt, das ihr wie gewünscht nix mehr machen müsst... mehr ned...
die richtige seite is doch deutlich mehr code...

ich weiß das ich noch vieles optimieren muss / sollte, nur fehlt mir schlicht die zeit, das teil soll möglichst bald online gehen und das am besten funktionstüchtig... optimieren kann ich später immer noch ... denn ich muss es den prüfern ja eh erst ne ganze ecke später zeigen...

und wie gesagt: ich anfänger!

darf mich hier noch mit c# und typo3 rumschlagen...
zugegeben es macht mir echt spass, aber den überblick zu behalten warum wo was funktioniert und wo ned... fällt mir grad schwer...

ich versteh z.b. auch ned warum der das fadeout und in gleichzeitig macht... und ned schön nacheinander wie ichs aufrufen tu...
auch hab ich ned gerafft warum er bei fadeout().ready() das ready einfach übergeht... also nicht wartet bis wirklich ausgefadet ist... also im den fall die 6sekunden

@DasBoeseLebt
auf die idee mit dem abfragen obs sichtbar ist, wäre ich nieee gekommen...
und
bei deinem code kapiere ich z.b. nicht was die letzten klammern da machen...

@nase
ganz ehrlich, danke das du mir hier antwortest, aber irgendwie scheine ich es ned zu raffen, denn so dinger wie timeouts etc. hatte ich alles schon verbaut, ich mein ich hab bevor ich hier nen thread aufgemacht hab, schon google gequält... durch etliche einträge und bsp. gelesen... aber wie ihr seht musst ich mich doch der Scham hingeben es einfach ned zu können...

das angebot weiter fragen zu stellen werde ich bestimmt, annehmen...

danke
grüße...

ps.: mit typo3 kennt sich von euch keiner zufällig aus?

Nase · 11. Oktober 2013

Teisi schrieb:
denn ich muss es den prüfern ja eh erst ne ganze ecke ...

?

Teisi schrieb:
ps.: mit typo3 kennt sich von euch keiner zufällig aus?

Nur am Rande.

Teisi schrieb:
auch hab ich ned gerafft warum er bei fadeout().ready() das ready einfach übergeht... also nicht wartet bis wirklich ausgefadet ist... also im den fall die 6sekunden

Weil du noch nicht verstanden hast, was der Unterschied zwischen ready und done ist. Steht aber auch alles in der Dokumentation zu den Funktionen.

ready: Wird ausgeführt, wenn das DOM vollständig geladen ist.
done: Wird ausgeführt, wenn die Funktion durchgelaufen ist.

Daher kannst du den Code von DasBoeseLebt nehmen und musst nur die fadeIns und fadeOuts noch anpassen, damit die nacheinander ablaufen.

Beispiel (wie oben schon geschrieben):

Code:

(function () {
	$(document).ready(function () {
		setInterval(function () {
			if ( $("#div_pic_left").is(':visible') ) {
				$("#div_pic_left, #div_pic_right").fadeOut(6000, done = function() {
					$("#div_pic_left1, #div_pic_right1").fadeIn(6000);
				});
			} else {
				$("#div_pic_left1, #div_pic_right1").fadeOut(6000, done = function() {
					$("#div_pic_left, #div_pic_right").fadeIn(6000);
				});
			}
		}, 12000);
	});
})();

Demonstration, dass das funktioniert: http://jsfiddle.net/jCLUH/

Teisi · 11. Oktober 2013

@nase
na ich muss ja da die projektarbeit (die in meinem fall ein echter kundenwunsch ist) vorlegen, bewerten lassen, und ne note bekommen....

oh man....

jetzt is der groschen gefallen, und ich dacht die ganze zeit: der gibt ner function nen namen... (dacht done ist nur irgend ein name) und weiter... muharhar

ich idiot...

wenn ichs so hab wie ich mir das vorstelle (jetzt schaff ich das hoffentlich) stell ichs hier wieder rein... thx...

DasBoeseLebt · 11. Oktober 2013

Teisi schrieb:
@DasBoeseLebt
auf die idee mit dem abfragen obs sichtbar ist, wäre ich nieee gekommen...
und
bei deinem code kapiere ich z.b. nicht was die letzten klammern da machen...

http://molily.de/js/organisation-module.html (Abschnitt 4 speziell; alles andere schadet aber auch nicht

)

Ansonsten fröhliches schaffen.

Teisi · 16. Oktober 2013

sehr interessante seite...
danke...

@Nase
thx, schlag mich zwar immer noch mit dem dämlichen typo3 rum... aber ganz langsam bekomm ichs halbwegs in griff...

Suche

JavaScript jquery fadein - out loop - schleife

Teisi

Lt. Junior Grade

Nase

Gast

DasBoeseLebt

Lieutenant

Nase

Gast

Teisi

Lt. Junior Grade

Nase

Gast

Teisi

Lt. Junior Grade

Nase

Gast

DasBoeseLebt

Lieutenant

Nase

Gast

DasBoeseLebt

Lieutenant

Teisi

Lt. Junior Grade

Nase

Gast

Teisi

Lt. Junior Grade

DasBoeseLebt

Lieutenant

Teisi

Lt. Junior Grade

Ähnliche Themen