Powtórzenie efektu .animate, JQuery Opcje

[djlukas777]

Witam serdecznie, wyklepałem sobie taki o to skromny skrypcik.

[HTML] pobierz, plaintext 
    <script>
        $(document).ready(function(){
          $(".block").animate({opacity: "0.1", top: "-=460", width:"50", height:"50", auto: "true"}, 2800)
            return false;
        });
    </script>
[HTML] pobierz, plaintext 

Mam jednak problem z jego powtórzeniem, ani loopy, ani returny itp nie działają, bardzo proszę o pomoc, z góry dziękuję i pozdrawiam.

[ActivePlayer]

Kod

<script>
        $(document).ready(function(){
          animuj($(".block"));
        });
function animuj(item){
$(item).animate({opacity: "0.1", top: "-=460", width:"50", height:"50", auto: "true"}, 2800, function(){
animuj(this);
});
}
</script>

Ten post edytował ActivePlayer 19.05.2011, 09:51:26

[djlukas777]

funkcja nie powtarza sie, wiąż odpala skrypt tylko raz

[ActivePlayer]

no ale musisz jeszcze dołożyć animację w drugą stronę, tak żeby było widać jakieś zmiany, bo animacja Ci sie odpala, ale nie widzisz zadnych zmian, bo po pierwszym odpaleniu juz nie ma sie co dziać dalej.
musisz to podzielic na pierwszą animację fade in, a potem drugą fade out

[djlukas777]

Ok, Udało mi się ogarnąć, może troszkę na około, ale działa i to dokładnie tak jak miało być.
Skrypt chciałem wykorzystać przy bąbelkach które będą leciały sobie do góry strony .

[PHP] pobierz, plaintext 
<script type="text/javascript">
        var timer;
            jQuery(function($) {
                timer = setTimeout(Cloud, 0);
            });
 
            function Cloud() {
                $(".block").css({opacity: "1", width:"90", height:"90"}).
                    animate({opacity: "0.0", top: "-=460", width:"30", height:"30", auto: "true"}, 2400, "linear").
                    animate({opacity: "0.0", top: "+=460"}, 20, "linear", function() {
                            timer = setTimeout(Cloud, 0);
                    });
            }
</script>
[PHP] pobierz, plaintext 

plus css dla elementu .block, chyba lepiej oddzielnie go użyć by nie pakować wszystkich deklaracji do skryptu...

[HTML] pobierz, plaintext 
<style>
    .block {
        position:absolute;
        background-color: #cc00cc;
        margin:285px;
    }
</style>
[HTML] pobierz, plaintext 

Można do tego dodać jeszcze jakiś z-index i mamy fajny efekt.
Oczywiście element .block polecam zastąpić jakąś grafiką .
Na zdrowie dla potomnych.

Ten post edytował djlukas777 19.05.2011, 13:03:51