Forum PHP.pl > [iQuery] animacja diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

Moorti

11.11.2008, 18:21:06

Witam mam taki prosty kod na zakładki przy zastosowaniu JQuery.
mam pytanie jak zrobić żeby po kliknięciu na zakładkę nie pojawiał się odrazu div tylko żeby było widac jak sie ładuje. Wiem że trzeba srobić jakis pliczek gif z animacją ale nie wiem jaki skrypt.

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="lol.css" />
    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript">

        $().ready(function()
        {
            $("ul#bookmarks li a").click(function()
            {
                $("ul#bookmarks .active").removeClass("active");
                $(this).parent().addClass("active");

                var element_index = $("#bookmarks a").index(this);

                $("#content div:visible").hide();
                $("#content div").eq(element_index).show();

                return false;
            });
        });
    </script>

</head>
<body>
    <div id="container">
        <ul id="bookmarks"><li class="active"><a href="#">bar1</a></li><li><a href="#">bar2</a></li><li><a href="#">bar3</a></li></ul>
        <div id="content">
            <div id="bar1"><p>aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
            <div id="bar2"><p>bLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
            <div id="bar3"><p>cLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.</p></div>
        </div>
    </div>
</body>
</html>

MMX3

11.11.2008, 18:24:53

[HTML] pobierz, plaintext 
$("ul#bookmarks li a").click(slideToggle("slow"));
[HTML] pobierz, plaintext

Przykład:
http://docs.jquery.com/Effects/slideToggle

Moorti

11.11.2008, 18:32:20

a gdzie to mam wkleić bo jak wkleje pod tamtym skryptem to nie działa a jak zastąpię zamiast

Kod

$("ul#bookmarks li a").click(function()

to w ogóle nie chodzi zakładka

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.