Navigation animation | Cannot get only the list item to animate

I have a small problem that I cannot figure out for the life of me. Maybe its because its 1am and im tired, but Ill ask anyway at the risk of looking like an idiot. I have this code

The HTML:

<style>
nav.main ul {
 font-size:175%;
 font-weight:300;
 text-align:right;
 }
nav.main ul li {
 padding-bottom:20px;
 }
nav.main ul li a {
 padding:5px 5px 5px 100%;
 background:#000;
 margin-left:-80%;
 }    
</style>

<nav class="main">
 <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#port">Portfolio</a></li>
  <li><a href="#team">Team</a&开发者_开发百科gt;</li>
  <li><a href="#contact">Contact</a></li>
</ul>

The JS

$(document).ready(function() {

var navHome = $("nav.main ul li a[href=#home]");

navHome.click(function() {
$(this).animate({paddingLeft:'125%'});
 });
});

I just want the link I click to animate to the left but when I click a link they all animate. I don't understand whats happening. I can set the css color just fine with the same selector but the animate() seems to select every link. Can you help me?

---

How about just changing the padding left/right values of the clicked element?

var navHome = jQuery("nav.main ul li a[href='#home']");
navHome.click(function() {
    jQuery(this).animate({
        'padding-left': jQuery(this).css('padding-right'),
        'padding-right': jQuery(this).css('padding-left')
    });
});

jsFiddle Example

---

I have figured it out. first I needed to add a width to my nav. I gave it a width of 150px in the CSS then I changed the JS to this

navHome.click(function() {
$(this).parent().animate({width:'250px'});

you can view my new jsfiddle here http://jsfiddle.net/uNQdE/1/