Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] efekt płynnego przesunięcia tekstu menu
Forum PHP.pl > Forum > Po stronie przeglądarki
john_doe
Witam,

jak uzyskać efekt, menu opartego o listę <ul>, najazdu tak aby tekst przejechał np. o 20px w lewo a po zjechaniu powrócił na swoje miejsce. coś jak tutaj
klik

pozdro
by_ikar
Do wyboru do koloru: http://api.jquery.com/slideToggle/ lub http://api.jquery.com/animate/ pewnie jeszcze z kilka by się znalazło możliwości na animacje w jquery.
john_doe
jsFiddle

coś tu nie śmiga sad.gif
by_ikar
Generalnie to w swoim przykładzie zjadłeś nawias, oraz użyłeś funkcji hover która nie do końca działa tak jak w przypadku css. Działa również tak jak w przypadku css, ale wówczas trzeba podać jej jakby 2 argumenty, pierwszy ten który coś wykonuje po najechaniu (coś w rodzaju onmouseover) i drugi argument który wykonuje coś po zabraniu kursora z obiektu (coś w rodzaju onmouseout). Kolejna sprawa, to użyłeś left: -=50px a co dosłownie odejmuje za każdym razem co najdziesz na obiekt atrybut css "left" tyle że podaje się go w przypadku pozycjonowania absolutnego/relatywnego/fixed. Więc nawet jeżeli byś wrzucił ten nawias do swojego przykładu to nie zauważysz żadnych zmian. Żeby przesunął się tekst, najlepiej użyć padding. Tutaj masz gotowca: http://jsfiddle.net/v5Rhp/18/
john_doe
super. Dokopałem sie do jakiegoś mojego kodu gdzie używałem hover i rzeczywiście trzeba również podać co się stanie jak zjedziemy. niemniej jednak dla left i tak nie poszło

dzięki bardzo
mokry
to co podał @by_ikar jest jak najbardziej ok, ale ma jedną wadę - jeżeli przejedziesz kursorem po linkach wielokrotnie będą one sobie pływać tyle razy ile najechałeś pomimo, że kursor będzie już gdzie indziej. Proponuję dodać jeszcze funkcję stop().

Przykład na podstawie kodu @by_ikar:
  1. $("#main-nav li a").hover(
  2. function () {
  3. $(this).stop().animate({ paddingRight: "25px" }, 200);
  4. },
  5. function () {
  6. $(this).stop().animate({ paddingRight: "15px" });
  7. }
  8. );


Podgląd: http://jsfiddle.net/v5Rhp/21/
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.