Плавное скрытие уведомлений?

Question

[m_xplay_official]

HTML структура

<div id='platforma'>
   <div id='message'></div>
   <div id='message'></div>
</div>

JS код плавно скрывающий системные уведомления

var timerId = setTimeout(function tick(){
    $('#message').fadeOut();
    timerId = setTimeout(tick, 7000);
}, 7000);

А теперь суть вопроса: предоставленный выше код работает на изи претензий нет к нему но есть одно но: допустим появилось первое уведомление и через 2 секунды второе уведомление. Так вот минус в этой реализации заключается в том что он одновременно скрывает видимые уведомления игнорируя об указанной чуть ранее задержке. Помогите пожалуйста избавиться от этого минуса.

Comments

[Леонид Князев]

А, почему тег AJAX? Вам в прошлом вопросе поправили тег на Java Script, и в этом вы опять ставите тег, который не относится к теме вопроса.

Answer 1

[ThunderCat]

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

Comments

[m_xplay_official]

есть возможность показать на примере?

[ThunderCat]

m_xplay_official,

<div id="cn"></div>
<button id="add">add</button>

<script>
	$(function(){
		$('#add').on('click',function(){
			let mess = $('<div >new mess</div>');
			$('#cn').append(mess);
			setTimeout(function(){
				fde(mess);
			}, 3000);
		});
	})

	function fde(obj){
		obj.fadeOut();
	}
</script>

Answer 2

[Андрей Андреев]

На одной странице не может быть двух одинаковых ID

Comments

[m_xplay_official]

вообще я через класс сделал но все же есть варианты реализации?