simple animation

by narensrinivasans

HTML

<nav>
    <ul>
        <li>Test1</li>
        <li>Test2</li>
        <li>Test3</li>
        <li>Test4</li>
    </ul>
</nav>

CSS

li {
    background: whitesmoke;
    border: 1px solid gray;
    cursor: pointer;
    color: grey;
    display: inline-block;
    padding: 4px 12px;
}
li:hover {
    border-color: black;
    color: black;
}
.green, .newlyAdded {
    color: green;
}
.red {
    color: red;
}
.note {
    color: grey;
    font-size: 16px;
    font-style: oblique;
    font-weight: normal;
    line-height: 16px;
    margin: 5px 0;
}

JavaScript

$('nav li').hover(function() {
    $(this).stop(true, true).animate({paddingLeft: '+=15px', paddingRight: '+=15px'}, 200);
}, function() {
    $(this).stop(true, true).animate({paddingLeft: '-=15px', paddingRight: '-=15px'}, 200);
});