как fadeIn при добавлении и fadeOut при удалении

Question

Я хотел бы дать эффект fadeIn, добавив некоторый элемент и эффект fadeOut при удалении элемента.

Итак, я попробовал этот

$(selector).closest('div').append(<p class="vali">hi this is test</p>).fadeIn(); 
$('.vali').fadeOut(); //this works because it is appended that is there is element 

Но когда нет ни одного элемента, и когда добавляется я могу дать FadeIn эффект непосредственно без установки его первого display: none; и дает эффект FadeIn

Answer 1

Вы можете создать CSS (, если проблема заключается в том, что вы устанавливаете его с помощью jquery), что делает .vali элементами display:none.

.vali{ 
    display:none; 
} 

Таким образом, когда вы добавляете элементы в DOM они первоначально будут скрыты, и появляются из-за .fadeIn()

---

Кроме того, ваш HTML код должен быть в кавычках, в противном случае вы получите ошибка синтаксиса.

.append('<p class="vali">hi this is test</p>') 

Answer 2

Я сделал это работает что-то вроде этого

$(selector).closest('div').append(<p class="vali">hi this is test</p>).hide().fadeIn();