Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] pauza animacji
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
pawkow
16.04.2009, 20:33:51
Witam serdecznie

Wykonuję sobie prostą funkcję js w taki sposób:

Kod
    function anim_partnerzy(repos)
     {
         if (repos == true) {$("#partnerzy").css('left', 623);}
        
         $("#partnerzy").animate({left: '-623'}, 7000, "linear", function(){
             anim_partnerzy(true);
         });
     }


i teraz chcę w pewnej chwili zrobić w taki sposób, aby po wznowieniu czas wykonywania animacji nie ulegał zmianie. W jaki sposób mogę zrobic to najprościej? To znaczy: pauza po 5 sekundach animacji - niech animacja nie trwa po wznowieniu kolejnych 7 sekund ale tylko 2.
erix
16.04.2009, 21:28:45
Na pewno musisz użyć $().stop(). winksmiley.jpg

Nie jest w sumie tak trudno, trzeba tylko ciut pogłówkować:
  1. zapisujesz w jakiejś zmiennej start (w ms)
  2. przy zatrzymaniu animacji znów pobierasz czas w ms - odejmujesz to od 7000ms - zostanie Ci wtedy, ile jeszcze ma trwać animacja
  3. sprawdzasz, ile px się przesunął obiekt
  4. uruchamiasz ponownie animację na sprawdzony czas i 623px-przesunięcie.
pawkow
16.04.2009, 21:34:53
W sumie to już sobie poradziłem, może w troszkę bardziej prymitywny sposób, ale obyło się bez dodatkowych zmiennych, działa dobrze, nie co do milisekundy ale różnicę trudno dostrzec.

Kod
    function anim_partnerzy(repos)
    {
        if (repos == true)
        {
            $("#partnerzy").css('right', -623);
            czas = 15000;
        }
        
        $("#partnerzy").animate({right: 623}, czas, "linear", function(){
            anim_partnerzy(true);
        }, false, false);
            
    }
    
    $(function() {
        
        anim_partnerzy(true);
        
        $("#partnerzy_c").hover(function(){
            $("#partnerzy").stop(true, false);
        }, function(){
            anim_partnerzy(false);
            czas = parseInt(7500*(623-parseInt($("#partnerzy").css('right')))/623);
        });
        
    });
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.