Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „div beim Laden der Seite langsam einblenden - jQuery?“

maxxscho

Code-Fan

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

Hutträger

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

Hi maxxscho,

klar ist das mit jQuery möglich:

HTML:
<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

Mod | Web

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

Code-Fan

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

Hutträger

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.

PHP:
<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

Mod | Web

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

Code-Fan

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

Hutträger

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

B2B Design e.K.

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

Noch nicht viel geschrieben

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

ullihantke

B2B Design e.K.

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

ullihantke

B2B Design e.K.

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();
}
});
});
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben