Почему с append() данные из цикла выводятся неправильно?

Question

[Genri_Rus]

Доброго времени суток!

Вот пример: https://codepen.io/Genri_Rus/pen/gyKjRR

У меня есть цикл, в котором выводятся данные из localStorage -

let cartArray = shoppingCart.listCart();
      let mHTML;
      for (let i in cartArray) {
        mHTML = '<div class="item">'
        mHTML += '<a href="' + cartArray[i].a + '" title="' + cartArray[i].title + '"><img src="' + cartArray[i].img + '"' + '></a>'
        mHTML += '<span class="copy">' + cartArray[i].p[0] + '</span>'
        mHTML += '<span class="copy-2">' + cartArray[i].p[1] + '</span>'
        mHTML += '<span class="remove-item" id="' + cartArray[i].id + '"><i class="fa fa-trash-o" aria-hidden="true"></i></span>'
        mHTML += '</div>';
    }  
      $(modal).append(mHTML); // вывод данных

Дело в том, что html() перезаписывает все данные из цикла, но мне нужна плавная анимация вывода в модальное окно из localStorage

Я пробовал сделать с помощью append - пример

Однако он работает как-то неправильно, при удалении из модельного окна - у меня появляются скрытые item'ы

P.S. Может кто-то знает, как можно сделать плавную анимацию вывода элементов из модального окна ?

Answer 1

[igotDiamonds]

Попробуй метод jquery .animate

Comments

[Genri_Rus]

Использовать animate в связке с html() или с append() ?

[Genri_Rus]

Могли бы подсказать как с animate можно сделать ?

[igotDiamonds]

Genri_Rus, при выводе данных вызывать анимейт

[igotDiamonds]

А item при клике исчезает из за вот этого места

else {
      $('.item').removeClass('item-show');
		  shoppingCart.removeItemFromCart(id);
      modalCart()

[Genri_Rus]

igotDiamonds, получается append в данном варианте будет работать некорректно ?

Т.к. при удалении элемента - функция modalCart() заново запускается и добавляет новые item'ы ?

[Genri_Rus]

igotDiamonds, могли бы помочь ?