div beim Laden der Seite langsam einblenden - jQuery?

[maxxscho]

Hallo!

Ich hätte wieder mal ne Frage.
Angenommen ich habe eine 3-spaltige Website, umgesetzt mit 3 div-Elementen, links, inhalt und rechts.
Ist es dann möglich, dass beim Laden der Seite das mittlere div langsam eingeblendet wird, oder "eingesildet" (heißt das so?) wird.
Ich hoffe, ihr versteht, was ich meine. Das ganze soll nur ein optischer Effekt werden.
Falls ja, ist das ganze dann mit jQuery möglich. Ich hatte mit jQuery nur insofern Kontakt, dass ich ne Lightbox, die in jQuery geschrieben habe, in ne Webseite integriert habe.

Gruss

 

[Tim]

AW: div beim Laden der Seite langsam einblenden - jQuery?

Hi maxxscho,

klar ist das mit jQuery möglich:

<script>
$(function(){
$('#id_deines_divs').fadeIn();
})
</script>

Alternativ zu fadeIn() kannst du auch slideDown() benutzen um den Slide-Effekt zu erzielen.

Viel Erfolg
Tim

 

[sokie]

AW: div beim Laden der Seite langsam einblenden - jQuery?

Voraussetzung, um den/die Effekt(e) zu sehen ist allerdings, dass die zu animierenden Elemente in den Fällen slideDown(),fadeIn() und show() zunächst ausgeblendet sind (z.B.: css("display","none") ).

 

[maxxscho]

AW: div beim Laden der Seite langsam einblenden - jQuery?

Das wäre ja gar nicht schwer.
Zudätzlich müßßte ich eben noch die jquery Bibliothek einbinden.
@Tim
so wie du das gepostet host, wird der "FadeIn" bzw. "slidedown" beim Laden der Seite automatisch ausgeführt?

Stellt sich nur noch die Frage, was ist, wenn der User JS deaktiviert hat?
Kein Inhalt? Wie könnte man das umgehen.
Man kann könnte ja innerhalb des "noscript" Tag das Inhalts-div nochmal erstellen, nur mit einer anderen ID und dieser per CSS einfach KEIN "display:hidden;" zuweisen.

Denk ich da jetzt in die richtige Richtung?

Jedenfalls schon mal DANKE!!!!

 

[Tim]

AW: div beim Laden der Seite langsam einblenden - jQuery?

Um den Nicht-JS-Benutzer trotzdem Inhalt zu bieten, versteckst du das div nicht per CSS sondern per JS.

<script>
$(function(){
$('#id_deines_divs').hide().fadeIn();
})
</script>

So wird das auch direkt ausgeführt, es wurde ja nicht an einen Event-Handler oder ähnliches gebunden.

 

[sokie]

AW: div beim Laden der Seite langsam einblenden - jQuery?

ja, denkst du,
deswegen hatte ich ja auch oben schon die jQuery funktion css("display","none") angegeben.
Was per Javascript ausgeblendet wird, wir ja angezeigt, falls javascript deaktiviert ist.

edit: ein bisshen spät... klar hide() geht natürlich auch.

 

[maxxscho]

AW: div beim Laden der Seite langsam einblenden - jQuery?

@sokie: Achso, du meintest damit eine jquery-Funktion. Ich dachte, dass du diese Anweisung fürs CSS meintest.
Ist schon klar, wenn das Verstecken per JS deklariert wird, dann ist es bei deaktiviertem JS natürlich nicht versteckt.
Deswegen fand ich deine Schreibweise komisch, weil ich in CSS und nicht in JS gedacht habe.

Danke ihr beiden, es funktioniert schon wunderbar.

P.S.: Ist jQuery wirklich so einfach, wie dieses Beispiel? Hab ja schon einiges gelesen, dass es einfach sein soll und auch ein guter Einstieg für Javascript.

 

[Tim]

AW: div beim Laden der Seite langsam einblenden - jQuery?

Ja, jQuery ist wirklich so einfach

Oder sagen wir es mal so: Der Schwierigkeitsgrad steigt mit deinen Ansprüchen

 

[ullihantke]

Hallo,

ich hätte ein Frage.

Auf meiner Website ist oben ein Menü in schwarz, ich möchte das dieses Menü beim scrollen durch ein weißes ersetzt wird, aber erst wenn das schwarze Menü nicht mehr zu sehen istl.

Das neue (weiße) Menü soll auch oben am Rand fixiert werden?

Jetzt die Frage, wie kann man dies umsetzten?

Danke

 

[georgN]

Setz einfach ein neues Menü in einen neuen Div und belnde diesen dann ein. Sollte eigentlich so klappen.

 

[georgN]

Oder habe ich da etwas falsch verstanden. Muss das gleiche Menü bestehen bleiben? Also mit aufklappung, aktivierung und allem?

 

[ullihantke]

@

so dachte ich mir das auch, aber wie geht das?

Ich weiss nicht wie ich es einblenden lassen soll.

 

[ullihantke]

Eigentlich soll das Menü welches da ist ausgeblendet werden und durch das neue ersetzt werden. Dieses soll dann aber fixed oben bleiben.

 

[ullihantke]

Ich habe da was gefunden... aber ob das passt?

$(document).ready(function() {
var myPosY;
$(window).bind( 'scroll', function() {
myPosY = $(window).scrollTop();
if ( myPosY >= 100 && $('#menu-black').hasClass('inactive') ) {
$('#menu-black').removeClass('inactive');
$('#menü-black').addClass('active');
$('#menu-black').fadeIn();

}
else if ( myPosY < 100 && $('#menu-black').hasClass('active') ) {
$('#menu-white').removeClass('active');
$('#menu-white').addClass('inactive');
$('#menu-white').fadeOut();
}
});
});