Animating the <li> removal in jQuery

Question

I'm adding and removing <li> elements with jQuery, that are shown horizontally with the following style:

#my_ul {
    list-style: none;
}
#my_ul li {
    float: left;
    margin: 0px 15px;
}

For example, if I add four <li> to an <ul> element and then I decide to remove the second one, after it has been removed the other two <li> elements on the right should immediately move to the left.

What I'd like to do is to animate this behavior, with the remaining <li> elements that softly move to the left.

Answer 1

Not sure how you are doing the remove, so I just bound this to a click event. The event will change but you can see the animation. Check out the animate jQuery function.

<ul id="my_ul">
    <li>11111</li>
    <li id="li2">11111</li>
    <li>11111</li>
</ul>


$('#li2').click(function() {
    $('#li2').animate({
        width: '0px'
    }, {
        duration: 1000,
        complete: function() {
            $(this).remove();
        }
    });
});