Javascript: kleine Animation! Hilfe!!

[mReTurkey]

Sehr geehrte Community,

seit langem versuche ich eine kleine Animation auszuführen wenn man auf ein bestimmten Button klickt.
Das soll so ablaufen:

1.) Der User klickt auf ein Bild, um die Animation zu starten.

<a onclick="moreDetail(1);" href="javascript:moreDetail(1);">
<img class="img_sendung" id="img_1" src="img/bsp/bsp_1.jpg">
</a>

<div style="display:none;" id="text_bsp_1">Hallo<br>Hallo?!</div>

2.) Die Animation soll ein einfaches Verschieben nach rechts mit Hilfe von "margin-left" darstellen.
Und dabei soll es ein "DIV" von Links erscheinen lassen. Alles möchte ich in weicher Animation machen.

D.h= Nicht einfach direkt nach Rechts sondern weich rüber bewegen

var a = 0;
var c = 1;

function fadeIn() {
document.getElementById('img_2').style.marginLeft=c +'px';
c++;

}
function doFadeIn() {
var aktiv = window.setInterval("fadeIn()", 1000);
window.setTimeout("aktivEnde()", 10000);
}

function aktivEnde() {
alert("hallo"); // ZUM Testen ob es auch geht!
window.clearInterval(aktiv);
}


function moreDetail(img_sendung_nr) {
	if(img_sendung_nr == 1) {doFadeIn();}
		else if(img_sendung_nr == 2) {detailOf2();}
		else if(img_sendung_nr == 3) {detailOf3();}
		else if(img_sendung_nr == 4) {detailOf4();}

}					

// detailOf2, ... mache ICH später nach dem Funktionieren von der Animation

function detailOf1() {
	document.getElementById('img_2').style.display='none';
		document.getElementById('img_2').style.marginLeft='10px';
	document.getElementById('img_3').style.display='none';	
	document.getElementById('img_4').style.display='none';
						
	document.getElementById('text_bsp_1').style.display='block';
	
}

Also habe ich ein Timer erstellen möchten der jede 10 Millisekunde 1px nach Rechts geht.
Bedauerlicherweise bekomme ich das nicht hin.

Wenn Ihr noch eine andere Alternative kennt (einfache) dann bitte ich euch mir das zu sagen

Mit freundlichen Grüßen
mReTurkey

 

[tombe]

Meinst du das in etwa so wie in diesem Beispiel hier.

Es ist rechts ein Bild. Wenn man dieses anklickt, wandert es langsam nach links aus dem Sichtbereich und wird dabei unsichtbar.

Gleichzeitig bewegt sich von der linken zur rechten Seite ein DIV-Container der auf dem Weg langsam sichtbar wird.

 

[mReTurkey]

Ja, genau das meine Ich.
Nur halt es sollte schneller sein, doch das kann man bestimmt ändern.

Muss ich den Code (vom Link) einfach so übernehmen.

Und danke für die schnelle Antwort

 

[Jan-Frederik Stieler]

Hallo,
nicht vergessen das dieses Beispiel jQuery benötigt.
Um es zu beschleunigen musst du nur die letzte Zahl der Optionen beim .animate Aufruf verringern.
http://api.jquery.com/animate/

Viele Grüße

 

[mReTurkey]

Ja, danke alles funktioniert!
Jedoch habe ich jetzt ein weiteres Problem.
Ich habe auf einer Reihe 4 Bilder.
Wenn ich "position: absolute;" mache werden alle bilder gestapelt. (d.h. = das letzte bild ist das oberste)

Wie löse ich das?

Mfg
mReTurkey

 

[Jan-Frederik Stieler]

Hi,
ja das sollte bei einer absoluten Positionierung auch so sein.
Wie sollen die Bilder den angeordnet sein?

Grüße

 

[mReTurkey]

So sollte es aussehen:


Wenn man 1 anklickt dann sollen alle anderen (2,3,4) nach rechts animiert werden und ein div container (text) soll dann erscheinen.
Bisher geht das so, dass das Bild "1" opacity:0 bekommt und der Text (div container) von rechts nach links erscheint.

Grüße
mReTurkey

 

[mReTurkey]

Hab es doch noch geschafft.
Hab es mit "left" gemacht.

also "absolute" bleibt nur left geändert

Mfg
mReTurkey

 

[Jan-Frederik Stieler]

Hi,
sorry hatte vergessen gehabt dir zu antworten.
Ja bei einer absoluten Positionierung kannst du eigentlich nur mittels left die Elemente so anordnen. Ist halt z.B. für ein responsive Layout ungünstig.

Grüße