Animating the <li> removal in jQuery

Question

Hi guys,

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> and then i decide to remove the second one, after it has been removed the other two <li> elements on the right immediately move to the left.

What i'd like to do is to animate this behaviour, with the remaining <li> elements that softly moves to the left.

Any tips?

Thanks

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();
        }
    });
});

Answer 2

first things first. if we consider the css structure of elements. and with regards to floating left property your lis will obey the browser realignment algorithm.

so in order to take control of how they are going to be stacked you need to position them as absolute.

sorry but i am not going write code for this, this time in the night but will share an algorithmic thought.

then from this post you can learn how to detect a removed element. Detect removed elem

after that if something is removed detecting its index in the stack should be easy.

then you need a function (assuming all box sizes are equal) to update the left position (css left) of the each element unless its index determines that it is at the beginning or end of a queue in which case its css top position also requires updating.

the distinguishing of an element whether if it is existing on the beginning or end of the queue should be gone about using its index.

in a manner which if its containers width is for example 400 px when it should contain 4 boxes in each row. so if the new box is adding a width which makes the sum more than the boxes which already exist in that row more than the total sum then the first index in that row is at the beginning and the apposite accordingly for the last element in a queue.

Answer 3

I had to do something like this recently. Here are the steps I followed for the deleted element:

1. Animate the opacity of the element to 0

2. Animate the widths, margins, and paddings to 0

3. Remove the element

I used code sort of like this:

  $(this).animate({opacity: 0}, 500);
  $(this).animate({width: 0, "padding-left": 0, "padding-right": 0, "margin-left": 0, "margin-right": 0}, 500, function() {
    $(this).remove();
  });