Próbuję zrobić płynnę przejście w jquery coś na wzór marquee z html-a z tym, że jeśli obrazek przekracza wielkość diva np. od dołu to zaczyna się wysuwać od góry. Udało mi się to zrobić jeśli elementy są przewijąne do dołu
var animuj = function(handle){ var img = handle; img.children().css("top", "+=4"); if(img.children(":last").css("top") > "500px"){ var h = img.children(":first"); h.remove(); img.append(h.css("top","-155px")); } } var box1 = $("#box1"); setInterval('animuj(box1)', 10);
I w sumie to działa. Niestety gdy próbuję przerobić skrypt aby obrazki leciały do góry cały czas jest coś nie tak.... ma ktoś pomysł jak to zrobić?
// Nowy post
Szkoda, że nikt nie odpowiedział bo wiem, że sposób w jaki działa ten skrypt jest bardzo daleki od ideału a ja inaczej nie potrafię tego zrobić. Rozwiązałem w końcu problem tak jak umiałem najprościej. Zrobiłem nową funkcję animuj_do_gory() i elementom które się mają poruszać nadałem bottom zamiast top. Mimo wszystko jakby miał ktoś chwilę czasu na odpowiedź jak to zrobić lepiej byłbym bardzo wdzięczny. Pozdrawiam
var animuj_b = function(handle){ var img = handle; var count_elm = img.children().size(); img.children().css("bottom", "+=4"); if(img.children(":first").css("bottom") > "500px"){ var h = img.children(":first"); h.remove(); img.append(h.css("bottom","-155px")); } }
<!---Kontener z elementami ktore maja sie przewijac od dolu do gory---> <div id="box2"> <img src="img/1.jpg" class="rotate_img" style="bottom:480px" /> <img src="img/2.jpg" class="rotate_img" style="bottom:320px" /> <img src="img/3.jpg" class="rotate_img" style="bottom:160px" /> <img src="img/4.jpg" class="rotate_img" style="bottom:0px" /> </div>