fadeIn / fadeOut - bei display: block / display: hidden

elyion_g2 · 09.12.2011

Hi leute! Vielen Dank das du dir mein Thema anschaust!

Ich habe eine Frage :

auf www.elyion.ch/test5 habe ich mal etwas hochgeladen

wenn man navigiert blendet es immer den div ein - der angesprochen ist indem es den style von : display: hidden - auf display: block setzt

Jetzt wollte ich fragen - ist es irgendwie möglich das wenn er einblendet:

auf display:block setzt - es eine kleine FadeIn Animation gibt? ...

und das umgekehrt

auf display:none setzt - es eine kleine FadeOut Animation gibt? ...

hier der auszug aus dem script welches die divs ein / ausblendet:

Code:

function toggleswitch(div)
{
var option=['conti1','conti2','conti3','conti4']; // nach belieben fortsetzen ...
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none"; }
}

Ich danke euch vielmals, wenn ihr eine Antwort habt!!! <3 das wäre super!!

Paric · 09.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

Da Du ja sowieso jQuery integriert hast, versuchs mal mit fadeIn() bzw fadeOut()

Sollte das sein was Du suchst, oder?

Gruß,
Paric

elyion_g2 · 09.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

hi paric - auf diese seite bin ich schon 100 mal gestossen und habe jeglichste versuche unternommen das in mein oben genanntes script einzubauen - leider ohne erfolg - ich bin leider noch anfängerin bei jquery - javascript etc..

...

die animation wäre aber die richtige ja ...

Aber danke für die Antwort!

cebito · 09.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

Was hast du denn bisher versucht? Ich würde erstmal die Seite validieren, und auch mal in die Fehlerkonsole schauen. Dein

HTML:

<script type="text/javascript">      
$(document).ready(function () {             
   fix_flash();      
}  
</script>

ist fehlerhaft, es fehlt die abschließende Klammer ")" und das Semikolon, das würde dann so aussehen

HTML:

<script type="text/javascript">      
$(document).ready(function () {             
   fix_flash();      
});
</script>

Zampano_ · 09.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

Du könntest dir auch mit JS und der CSS3-Eigenschaft "opacity" einen eigenen fader bauen... aber ob das der einfachste weg ist?!?

elyion_g2 · 09.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

habe ich jetzt geändert -

ich kann dir aber nicht mehr sagen wie / was ich alles ausprobiert habe... ist jetzt schon paar tage her... aber ich habe das skript von dort genommen und vor oder hinter dem skript gsetzt - mit ID's und Classes herumgespielt..

Ich verstehe das Skript nicht so ganz - ich kann kaum englisch also ist die seite mit dem skript auch nicht das tollste...

wärst du so nett und würdest mir mal aufzeigen wie ich es in das von mir oben genannte skript einfügen kann? ... das wäre wirklich toll!!

Duddle · 09.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

Du hast durch deine Spielereien ein sehr unsauberes Ergebnis. Genauer gesagt hast du Funktionalitäten mehrmals über mehrere verschiedene Wege eingebaut, die sich potenziell gegenseitig behindern.

Zum Beispiel bindest du jQuery mehrfach ein; auch die Menülinks werden im Tag selbst per onclick gesteuert, aber auch ganz unten per bind('click'). Die Seite selbst ist ebenfalls sehr schlecht zusammengebaut, du hast scheinbar den Code mehrerer Seiten einfach in eine kopiert. Das kann nur zu unerwartetem Verhalten führen.

Deshalb mein Vorschlag:

Fang nochmal von vorn an, baue das HTML sauber zusammen (wenn du schon dabei Probleme hast, lies dir Anfänger-Tutorials durch) und komme mit diesem Zwischenergebnis wieder hier her. Dann kann man da viel einfacher eine effiziente Lösung draufpappen.

Duddle

elyion_g2 · 09.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

ich weiss nicht was ihr unter sauber versteht - mir ist der quelltext auf deutschgesagt s******egal ... das endergebnis - was der normale nutzer sieht (also die leute die sich den quelltext sowiso nicht anschauen) interessiert mich ..

und meine spielereien sind nicht mehr eingebaut bei meinem beispiel was ihr da seht...

und es funktioniert ja soweit so wie ich es möchte....

ich will einfach beim display:none und display:block 'n eine fade-in / out animation drin

ich fang sicher nicht nocheinmal von vorne an! entschuldige... das waren 2 monate arbeit...

und ich danke euch für konstruktivere lösungen die nicht an meinem grundgerüst wackeln... !! danke!

cebito · 09.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

elyion_g2 schrieb:
mir ist der quelltext auf deutschgesagt s******egal ...

Dem Browser nicht und mir bspw. auch nicht, denn ich muss mich durch das Durcheinander wühlen um dir helfen zu können. Duddle sagte es bereits, jQuery ist mehrfach eingebunden, du hast mehrere head und body in deiner Seite, das Ganze ist einfach nur grauenvoll. Wenn du nicht bereit bist diese Fehler auszumerzen, dann ist dir auch nicht zu helfen.

Duddle · 09.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

elyion_g2 schrieb:
das endergebnis - was der normale nutzer sieht (also die leute die sich den quelltext sowiso nicht anschauen) interessiert mich ..

Klar, das sehen die meisten Nicht-Entwickler so.

Du solltest aber dennoch verstehen, dass ein mit Heißklebepistole und Panzertape zusammengeflicktes Auto fehleranfälliger und unvorhersehbarer ist als ein in der Manufaktur professionell gebautes Exemplar - selbst wenn sie von aussen betrachtet gleich aussehen mögen.

Duddle

elyion_g2 · 12.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

ich verstehe was ihr meint - aber mein problem kann man deswegen trotzdem lösen - die eine .js datei die vorhanden ist muss man dafür nur ausbauen ... (bessergesagt das obere script) dafür braucht man die ausgabe-dateien nicht...

in dem falle sehe ich aber das hier keiner mehr eine konstruktive lösung hat - sondern nur noch kritik an mir. (eure kritik ist mir eigentlich egal) ... ich suche mir ein anderes forum ... geschlossen [ich suche mir ein schweizer forum - deutsche haben alle einen tunnelblick ... -.- ]

AionEleven · 12.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

Hi, ich bin neu hier bei psd-tutorials und wollte mal ein wenig im Forum schnuppern. nun bin ich auf diesen Artikel gestossen und habe gesehen das ihr hier auseinandersetzungen habt. ich hoffe nicht dass das hier überall so ist

. aber @elyion_g2 : das ist doch kein grund gleich das forum zu verlassen, man muss kritik doch hinnehmen können und aus ihr lernen!

ich bin selber nicht so das goldene von javascript & jquery aber ich habe trotz alle dem ein lösungsvorschlag (bitte korrigiert mich wenn ich damit falsch liege, es ist ungetestet)

Code:

function toggleswitch(div)
{
var option=['conti1','conti2','conti3','conti4']; // nach belieben fortsetzen ...
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none"; }

if (obj.style.display=none)
{
function () {
            $(option[i]==div).fadeOut(1000);
}
else
{
function () {
            $(option[i]==div).fadeIn(1000);
}
}

So, jetzt schau ich mich noch weiter um, dieses Forum ist genial

cebito · 12.12.2011

AW: fadeIn / fadeOut - bei display: block / display: hidden

Diese verallgemeinernde Beleidigung allein wäre ein Grund, dein Profil zu sperren -> , wenn man sie denn ernst nehmen könnte. Und da du keine Hilfe annehmen möchtest, kann ich hier ja wirklich schließen.

Edith sagt noch - Selbstgespräche?! Musst du dich jetzt selbst bestätigen? Das Zweitprofil geht dann gleich mal wieder in die Versenkung!