[jQuery] efekt płynnego przesunięcia tekstu menu Opcje

[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 (IMG:style_emoticons/default/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:

[HTML] pobierz, plaintext 
$("#main-nav li a").hover(
    function () {
        $(this).stop().animate({ paddingRight: "25px" }, 200);
    },
    function () {
        $(this).stop().animate({ paddingRight: "15px" });
    }
); 
[HTML] pobierz, plaintext 

Podgląd: http://jsfiddle.net/v5Rhp/21/

Ten post edytował mokry 15.11.2011, 22:15:30