$(document).ready(function(){
var i = 0;
function yved(){
i=1;
$('.yved:nth-child('+i+')').fadeIn(500).delay(3000).fadeOut(500);//В этой строчке в мс 500 - время анимации появления, 3000 - время задержки, 500 - время затухания уведомления соответсвенно
}
setTimeout(function(){
setInterval(
function(){
i=i+1;
if(i>10) i=1;//10 - количество уведомлений
$('.yved:nth-child('+i+')').fadeIn(500).delay(3000).fadeOut(500);//В этой строчке в мс 500 - время анимации появления, 3000 - время задержки, 500 - время затухания уведомления соответсвенно
},5000);//25000 - задержка в мс меду показами уведомлений
yved();
},1000);//10000 - задержка в мс перед показом первого уведомления
});
.yved{position: fixed; right: 20px; top: 10px; color: #000; padding: 10px 15px; font-size: 15px; box-shadow: 0 0 3px 1px #bbb; border-radius: 5px; line-height: 20px; background-color: #ffffff; display: none; font-weight: 300;}
.yved span{font-weight: 700; display: block;}
<div class="yvedw">
<div class="yved yvedf1">
<div class="yvedvt">
<div class="yvedt">
<span>Новый заказ на сайте</span>
<p>Доставка [data] в [time]</p>
<p>Клиент только что оформил заказ на [summa] руб.</p>
</div>
</div>
</div>
</div>
Нужно сделать циклическое появление сообщений, а то сейчас показывается один раз;
В переменных [data], [time], [summa] – должно подставляться рандомно значение, например, первый раз в переменную [summa] подставляется значение "7 500", второй раз "3 220" и т.д., Что должно быть в переменных описал ниже.
переменные:
[data] – подставляется дата в формате 21/09/16, в переменной будет три значения (сегодняшнее, завтрашнее и после завтрашнее число) – дата подставляется рандомно
[time] – подставляется время в формате 13.00 – округление до часа, берутся значения с 8.00 до 21.00 – время подставляется рандомно
[summa] – подставляется сумма заказа в формате 7 500 (важен пробел, если тысячи) – округление до 10 руб., берутся значения с 2500 до 15000 – сумма подставляется рандомно
Думаю тема не только мне будет интересна!