JQuery <li> delete animation

Question

I add and remove <li> elements using jQuery, which are displayed 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> elements to the <ul> element, and then I decide to remove the second, after it has been deleted, the other two <li> elements on the right should immediately move to the left.

What I would like to do is animate this behavior, and the rest of the <li> elements that gently move to the left.

Answer 1

Not sure how you do the deletion, so I just attached it to the 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 first. if we look at the css structure of the elements. and with respect to the floating property left, your lis will obey the browser rebuilding algorithm.

therefore, to take control of how they are stacked, you need to set them as absolute.

Sorry, but I am not going to write code for this, this time at night, but I will share an algorithmic thought.

then from this message you can learn how to detect the deleted item. Detect deleted item

after that, if something is deleted, finding its index on the stack should be easy.

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

the difference of an element, if it exists at the beginning or at the end of the queue, should disappear using its index.

in a way that, if its container width is, for example, 400 pixels, when there should be 4 fields in each row. therefore, if the new field adds a width that makes the amount larger than the boxes that already exist on this line more than the total amount, then the first index on this line is at the beginning and accordingly corresponds to the last item in the queue.

Answer 3

Recently, I had to do something similar. Below are the steps that I followed for the remote item:

• Animate the opacity of the element to 0

• Animate widths, margins, and paddings to 0

• Delete item

I used code like:

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