<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> .widget{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var p = $(".widget"), len = p.length, indx = 0;
void function go() {
var tm = (Math.random() * 5 + 5) * 1000|0;
p.eq(indx).delay(tm).fadeIn("slow", function() {
indx = ++indx % len;
$(this).delay(2000).fadeOut("slow", go);
});
}();
});
</script>
</head>
<body>
<div class="widget">01</div>
<div class="widget">02</div>
<div class="widget">03</div>
<div class="widget">04</div>
<div class="widget">05</div>
<div class="widget">06</div>
<div class="widget">07</div>
<div class="widget">08</div>
<div class="widget">09</div>
<div class="widget">10</div>
<div class="widget">11</div>
<div class="widget">12</div>
</body>
</html>