Inhalt langsam einblenden

T!P-TOP · 15 April 2011

Hallo zusammen,

Wahrscheinlich stelle ich mir das zu einfach vor, jedenfalls will ich den INhalt des Divs mit der id "content" mittels jquery langsam einblenden.

Im body Elemente habe ich ein onload platziert

<body onload="javascript:fadeIn()">

Die FUnktion fadeIn() ist in einer ausgelagerten JS-Datei, sieht folgedermaßen aus:

function fadeIn()
{
$('div#content').fadeIn('slow');
}

Den Div-Content habe ich über CSS visibility hidden gegeben.
Allerdings bleibt alles auf Hidden, der Content wird nicht eingeblendet :/ !?

Grüße

struppi · 15 April 2011

Wie kommst du darau, dass jquery die Eigenschaft visibility verwendet? In de Doku steht's anders .fadeIn() – jQuery API

mermshaus · 15 April 2011

HTML:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>jQuery FadeIn</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
        /* <![CDATA[ */

        $(document).ready(function () {
            $('#content').css('display', 'none');
            $('#content').fadeIn(5000);
        });

        /* ]]> */
        </script>
        <style type="text/css">
            #content { width: 400px; height: 300px; background: red; }
        </style>
    </head>

    <body>
        <div id="content">Test</div>
    </body>

</html>

Frage mich aber, ob das nicht eleganter gehen müsste. Wenn ich das richtig sehe, steht nicht fest, dass alle weiteren Elemente in #content (Bilder etwa) vollständig geladen wurden.

Inhalt langsam einblenden

T!P-TOP

Mitglied

struppi

Guest

mermshaus

Senior HTML'ler

Neueste Beiträge