Анимация удаления <li>в jQuery

Question

Я добавляю и удаляю <li> элементы с помощью jQuery, которые отображаются горизонтально в следующем стиле:

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

Например, если я добавлю четыре <li> к элементу <ul>, а затем решу удалить второй, после того, как он был удален, остальные два элемента <li> справа должны немедленно переместиться влево .

Что я хотел бы сделать, так это оживить это поведение, оставшиеся элементы <li> плавно перемещаются влево.

Answer 1

Не уверен, как вы делаете удаление, поэтому я просто связал это с событием щелчка. Событие изменится, но вы можете увидеть анимацию. Проверьте функцию animate jQuery.

<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

Мне пришлось сделать что-то подобное в последнее время. Вот шаги, которые я выполнил для удаленного элемента:

1. Анимация непрозрачности элемента до 0

2. Анимация ширины, полей и отступов до 0

3. Удалить элемент

Я использовал такой код:

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

Answer 3

обо всем по порядку. если мы рассмотрим css структуру элементов. а в отношении плавающего свойства left ваш список будет подчиняться алгоритму перестройки браузера.

так что для того, чтобы взять под контроль то, как они будут складываться, вам нужно позиционировать их как абсолютные.

извините, но я не собираюсь писать код для этого, на этот раз ночью, но поделюсь алгоритмической мыслью.

тогда из этого поста вы можете узнать, как обнаружить удаленный элемент. Обнаружение удаленного элемента

после этого, если что-то будет удалено, определить его индекс в стеке будет легко.

тогда вам нужна функция (при условии, что все размеры блоков равны) для обновления левой позиции (css left) каждого элемента, если только его индекс не определяет, что он находится в начале или конце очереди, и в этом случае его css top позиция также требует обновления.

Различение элемента, независимо от того, существует ли он в начале или в конце очереди, следует использовать с помощью его индекса.

таким образом, что если ширина его контейнеров составляет, например, 400 пикселей, тогда он должен содержать 4 поля в каждой строке. поэтому, если новое поле добавляет ширину, которая делает сумму больше, чем количество ящиков, уже существующих в этой строке, больше, чем общая сумма, тогда первый индекс в этой строке находится в начале, и, соответственно, соответствующий для последнего элемента в очереди .