Forum PHP.pl > [JavaScript] Animacja w JS.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Animacja w JS.

ed3k

17.02.2009, 21:04:09

Witam!

Chciałbym aby div mi się rozszerzał od 0px do 100px w ciągu np 2sekund. Wydaje mi się, że muszę zrobić to za pomocą pętli for, z tym, że muszę zatrzymać na jakiś ułamek sekundy pętlę. Czy istnieje funkcja inna niż setTimeout do tego? Kiedyś kolega wspominał mi, że istnieje w js pętla, która jako jeden z arg wczytuje opóźnienie wykonania następnego kroku.

Czy ktoś zna rozwiązanie?

Crozin

17.02.2009, 21:06:02

Możesz skorzystać z setTimeout() i setInterval() i obie się tutaj spiszą dobrze.

ed3k

17.02.2009, 21:19:14

Nie rozumiem tej idei. Poczytałem trochę, ale nadal nie działa. Może ktoś wrzucić gotowy kod?

Crozin

17.02.2009, 22:21:02

Prosty przykład (z palca) na animację z wykorzystaniem setInterval()

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" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Przykładowy dokument</title>

        <style type="text/css">
            #abc{
                background: red;
            }
        </style>
        <script type="text/javascript">
            var c = 0;

            document.addEventListener("DOMContentLoaded", function(){
                showtime = setInterval("animate()", 10);
            }, false);

            function animate(){
                var abc = document.getElementById("abc");
                var h   = abc.offsetHeight;

                if(c == 300){
                    clearInterval(showtime);
                }

                h++;
                c++;
                abc.style.height = h + "px";
            }
        </script>
    </head>
    <body>
        <div id="abc">s</div>
    </body>
</html>

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.