Oto stary kod css który chce zaanimować dla lepszego efektu

[HTML] pobierz, plaintext 
#pa_m:hover { padding:16px 12px 17px 12px;background-image: linear-gradient(bottom, rgb(26,26,26) 0%, rgb(89,89,89) 60%);
background-image: -o-linear-gradient(bottom, rgb(26,26,26) 0%, rgb(89,89,89) 60%);
background-image: -moz-linear-gradient(bottom, rgb(26,26,26) 0%, rgb(89,89,89) 60%);
background-image: -webkit-linear-gradient(bottom, rgb(26,26,26) 0%, rgb(89,89,89) 60%);
background-image: -ms-linear-gradient(bottom, rgb(26,26,26) 0%, rgb(89,89,89) 60%);
 
background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(26,26,26)),
	color-stop(0.6, rgb(89,89,89))
);  } 
[HTML] pobierz, plaintext 

znalazłem taki kod żeby animować css po najechaniu w niego(dodam że odnośnik ma nadany id="pa_m"):

[HTML] pobierz, plaintext 
$(document).ready(function(){
$("#pa_m").hover(function(){
$("#pa_m").animate({padding:"16px 12px 17px 12px"},"slow");
});
});
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<script type="text/javascript" src="/pd/jquery.js"></script>
<script type="text/javascript"> jQuery.noConflict(); </script>
[HTML] pobierz, plaintext 

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

[JAVASCRIPT] pobierz, plaintext 
$(function () {
   $('#pa_m').hover(function () {
          $(this).addClass('klasa po najezdzie') },
     function () { $(this).removeClass('klasa po najezdzie') 
    });
})
[JAVASCRIPT] pobierz, plaintext 

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ł?

[HTML] pobierz, plaintext 
$(function () {
   $("#pa_m").hover(function () {
          $(this).addClass("pa_m_hover") },
     function () { $(this).removeClass("pa_m_hover") 
    });
})
[HTML] pobierz, plaintext 

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.

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

[HTML] pobierz, plaintext 
$(document).ready(function(){
  $('#pa_button')
    .css({ 'backgroundPosition': '0 0' })
	.hover(
      function(){
        $(this).stop()
          .animate({
            'opacity': 0.79
          }, 600);
	  },
	  function(){
        $(this).stop()
          .animate({
            'opacity': 1
          }, 600);
	  }
	);
});
[HTML] pobierz, plaintext