Ładny wjazd strony w jQuery


(arlid) #1

Witajcie. Mam pytanie. Mam na stronie box (z przyciskiem do "zamykania"), gdzie po kliknięciu na ów przycisk box znika, a strona pod nią wędruje do góry. Owszem wszystko działa, ale jak zrobić by ona wracała tam "łagodnie", bo teraz jest to takie od razu bum i jest na górze.

Oto kodzik tego co udało mi się wymodzić:

$(document).ready(function() {

		$(".closebutton").click(function(){

			$(".box").fadeOut("slow");

	});

	 });

(Zbyszekborkowski) #2

Spróbuj z funkcją animate().


(arlid) #3

Dzięki, zobaczę, może da się coś zrobić, bo wiem, ze jakoś to się da wykonać gdyż widziałem na stronie.


(Hausner15) #4

Hmm chcesz całą stronę wysłać do góry?:slight_smile:

Problem w tym że animacja nie będzie płynna - stworzyłem kiedyś stronę z podstronami które przechodziły przez animację (animacja przewijania). I na procku c2d 1,8 ghz x2 (mobilny) animacja nie była do końca płynna. Jeżeli już koniecznie chcesz coś takiego to radziłbym stworzyć diva o rozmiarach viewportu (wpisz w google viewport javascript, to dorwiesz prosty skrypcik który zwróci ci odpowiednie rozmiary), a następnie do tego diva wsadzić kolejnego z scrollem w którym będzie strona.

Wtedy będziesz mógł użyć tego kodu co masz wyżej (bo teoretycznie powinien on działać)

Pozdro


(arlid) #5

Chodzi mi o to, ze mam np. box a jakąś informacja np. ,że został dodany komentarz i w nim przycisk zamykania, tytułowy "X". I chciałbym, by po kliknięciu w tego X'a znikał box, a to co na dole wędrowało o tyle do góry ile boxa zniknęło. Widziałem już takie animacje i działały bardzo płynnie i ładnie.


(Mbocian 94) #6

Według mnie, zamiast animacji fadeIn/fadeOut użyj slideUp(down) lub show/hide. Np.

$(".closebutton").click(function(){

         $(".box").slideUp();

});

Celowo wykasowałem kod z document.ready, gdyż jej użycie uważam za zbędne, gdyż funkcja ma być wykonana po kliknięciu przycisku z czego co wnioskuję, a nie przy załadowaniu strony.


(arlid) #7

Dzięki kolego :smiley: Może faktycznie, dopiero się uczę, więc nie znam tego jeszcze tak dobrze.


(Mbocian 94) #8

Trochę źle sformułowałem w pierwszym zdaniu nazwy funkcji, więc teraz je trochę bardziej przedstawię.

slideUp/slideDown z parametrem np. 'slow'

Przykład użycia:

$("#mojawarstwa").click(function(){

    $("#jakaswarstwa").slideUp("slow"); //tu może być dodatkowo parametr po slow, function, który zrobi coś gdy się zakończy animacja

});

Można też użyć funkcji show/hide z parametrem jw. 'slow'.

$("#mojawarstwa").click(function(){

    $("#jakaswarstwa").show("slow"); //j.w mozna tez po slow uzyc function

});

Warto też przeglądnąć dokumentację (sam z niej często korzystałem, gdy się uczyłem jQuery, choć też czasem przeglądam :stuck_out_tongue_winking_eye:): http://docs.jquery.com/Main_Page


(arlid) #9

Hmm, a byłbyś tak dobry, by powiedzieć mi jeszcze jak zrobić, by po kliknięciu w jakiś obiekt "wysuwał" się spod niego tekxt? Mniemam, ze należy użyć slideDown w celu gładkiej animacji, zgadza się?


(Mbocian 94) #10

Załóżmy że mamy div-a i obrazek pod nim

Jakas tresc

Tutaj ten tekst nie będzie się domyślnie wyświetlał, dopiero po kliknięciu obrazka
jakisobrazek.png


(arlid) #11

Dzięki kolego, troszkę mi się to rozjaśniło, i to nawet bardzo :slight_smile: