Background Position CSS Menu

Just a cool menu navigation that I made using a background position plugin

HTML

<script src="http://keith-wood.name/js/jquery.backgroundpos.js"></script>
<nav>
    <ul class="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="list.html">The List</a></li>
        <li><a href="common.html">Common</a></li>
        <li><a href="javascript:void;">Quotes</a></li>
        <li><a href="poems.html">Poems</a></li>
        <li><a href="photos.html">Photos</a></li>
    </ul>
</nav>

CSS

nav{background-color:#4d004d; text-align:center; font-size:0;}
nav li{display:inline-block;}
nav a {
    display:block;
    padding:22px 0;
	
    color:#80265c;
    text-shadow:1px 1px 1px #fff;
    font:16px 'Oswald', arial, serif;
    text-align:center;
    text-transform:uppercase;
	text-decoration:none;
    letter-spacing:1px;
    color:#000;
	
	background-image: -webkit-linear-gradient(180deg, rgba(255,255,255,.07) 50%, transparent 50%), -webkit-linear-gradient(180deg, rgba(255,255,255,.13) 50%, transparent 50%), -webkit-linear-gradient(180deg, transparent 50%, rgba(255,255,255,.17) 50%), -webkit-linear-gradient(180deg, transparent 50%, rgba(255,255,255,.19) 50%);
	background-image: -moz-linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), -moz-linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), -moz-linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), -moz-linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
	background-image: -o-linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), -o-linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), -o-linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), -o-linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
	background-image: -ms-linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), -ms-linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), -ms-linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), -ms-linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
	background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
	linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
	linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
	linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
	-webkit-background-size: 13px, 29px, 37px, 53px;
	-moz-background-size: 13px, 29px, 37px,...

JavaScript

$("nav a").click(
    function () {
        $(this).animate({'background-position': '+=100% 0'},25); 
    }, 
    function () {
        $(this).animate({'background-position': '+=25% 0'},25); 
    }
);