Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [jQuery] animate() zmiana stylu po najechaniu w odnośnik Proszę o szybką odpowiedz
vodkon
post 16.09.2012, 09:57:26
Post #1





Grupa: Zarejestrowani
Postów: 72
Pomógł: 0
Dołączył: 8.02.2011

Ostrzeżenie: (0%)
-----


Oto stary kod css który chce zaanimować dla lepszego efektu
  1. #pa_m:hover { padding:16px 12px 17px 12px;background-image: linear-gradient(bottom, rgb(26,26,26) 0%, rgb(89,89,89) 60%);
  2. background-image: -o-linear-gradient(bottom, rgb(26,26,26) 0%, rgb(89,89,89) 60%);
  3. background-image: -moz-linear-gradient(bottom, rgb(26,26,26) 0%, rgb(89,89,89) 60%);
  4. background-image: -webkit-linear-gradient(bottom, rgb(26,26,26) 0%, rgb(89,89,89) 60%);
  5. background-image: -ms-linear-gradient(bottom, rgb(26,26,26) 0%, rgb(89,89,89) 60%);
  6.  
  7. background-image: -webkit-gradient(
  8. linear,
  9. left bottom,
  10. left top,
  11. color-stop(0, rgb(26,26,26)),
  12. color-stop(0.6, rgb(89,89,89))
  13. ); }


znalazłem taki kod żeby animować css po najechaniu w niego(dodam że odnośnik ma nadany id="pa_m"):
  1. $(document).ready(function(){
  2. $("#pa_m").hover(function(){
  3. $("#pa_m").animate({padding:"16px 12px 17px 12px"},"slow");
  4. });
  5. });

Jak zrobić aby tam gdzie mamy padding i jego wartości wkleić cały kod css który jest u góry
i jeszcze aby działo się to po najechaniu i po odjechaniu z odnośnika element wracał do poprzednich wartości i czy jeśli mam na stronie już element jQuery to czy zdefiniowanie na początku kodu w ten sposób sprawi że wszyskie funkcje w jQuery będą działać i możliwe będzie użycie kilka razy jQuery na jednej stronie bez problemów
  1. <script type="text/javascript" src="/pd/jquery.js"></script>
  2. <script type="text/javascript"> jQuery.noConflict(); </script>


Ten post edytował vodkon 16.09.2012, 13:19:15
Go to the top of the page
+Quote Post
grzes999
post 16.09.2012, 13:31:19
Post #2





Grupa: Zarejestrowani
Postów: 305
Pomógł: 29
Dołączył: 5.07.2011

Ostrzeżenie: (0%)
-----


Tak wystarczy raz w dokumencie dołączyć plik z biblioteką.
Co do animacji to zrób tak.

[JAVASCRIPT] pobierz, plaintext
  1. $(function () {
  2. $('#pa_m').hover(function () {
  3. $(this).addClass('klasa po najezdzie') },
  4. function () { $(this).removeClass('klasa po najezdzie')
  5. });
  6. })
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
vodkon
post 16.09.2012, 15:17:02
Post #3





Grupa: Zarejestrowani
Postów: 72
Pomógł: 0
Dołączył: 8.02.2011

Ostrzeżenie: (0%)
-----


Działa ale tylko pierwszy odnośnik ja mam 3 których id jest taki sam wtedy tylko pierwszy działa, 2 sprawa obiekt nie wydaje się być zaminowany wygląda tak samo jak z "#pa_m:hover" oczywiście usunąłem ten i stworzyłem .pa_m_hover czy można zrobić tak aby obiekt był animowany płynnie przechodził?
  1. $(function () {
  2. $("#pa_m").hover(function () {
  3. $(this).addClass("pa_m_hover") },
  4. function () { $(this).removeClass("pa_m_hover")
  5. });
  6. })
Go to the top of the page
+Quote Post
grzes999
post 16.09.2012, 15:49:50
Post #4





Grupa: Zarejestrowani
Postów: 305
Pomógł: 29
Dołączył: 5.07.2011

Ostrzeżenie: (0%)
-----


Bo id musi być unikatowe dlatego nie dział tylko dla pierwszego obiektu. A co płynnej animacji to nie wiem o co ci chodzi :/ po najechaniu dodajesz do obiektu klasę z wygladem jaki chcesz aby miał a po opuszczeniu kasujesz tą klasę dla obiektu. Czyli wszystko to co dałem ci w kodzie.
Go to the top of the page
+Quote Post
vodkon
post 16.09.2012, 15:58:46
Post #5





Grupa: Zarejestrowani
Postów: 72
Pomógł: 0
Dołączył: 8.02.2011

Ostrzeżenie: (0%)
-----


Tak, tylko chodziło mi o płynne przejście
w innej stronie użyłem płynnego przejścia ale nie wiem ja przerobić ten kod na klasy css na ten styl co podałem w pierwszym poście
  1. $(document).ready(function(){
  2. $('#pa_button')
  3. .css({ 'backgroundPosition': '0 0' })
  4. .hover(
  5. function(){
  6. $(this).stop()
  7. .animate({
  8. 'opacity': 0.79
  9. }, 600);
  10. },
  11. function(){
  12. $(this).stop()
  13. .animate({
  14. 'opacity': 1
  15. }, 600);
  16. }
  17. );
  18. });


Ten post edytował vodkon 16.09.2012, 15:59:29
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 8.07.2025 - 21:46