pafnuty/li_statistics.html

## li_statistics.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Статистика</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
		<script>
			jQuery(document).ready(function($) {
				$('.stat-div li a i').each(function(e) {
					$(this).animate({
						height : $(this).data('height')+'%'
						},
						500, function() {
						// stuff to do after animation is complete
						console.log(e+'-ok');
					});
				});
			});
		</script>
	</script>
	<style>
		body {
			width: 600px;
			margin: 100px auto;
			}
		.stat-div {
			width: 250px;
			height: 100px;
			margin: 0;
			padding: 0;
			list-style: none;
			vertical-align: text-bottom;
		}
		.stat-div li {
			float: left;
			position: relative;
			width: 50px;
			height: 100px;
		}
		.stat-div li a {
			display: block;
			height: 100px;
		}
		.stat-div li a:hover {
			background: #fafafa;
		}
		.stat-div li a i {
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 0;
			height: 0;
			background: #badaba;
		}

	</style>
</head>
<body>
	<span class="showstat">showstat</span>
	<ul id="main-header-stats" class="stat-div">
		<li><a href="#"><i data-height="58"></i></a></li>
		<li><a href="#"><i data-height="78"></i></a></li>
		<li><a href="#"><i data-height="18"></i></a></li>
		<li><a href="#"><i data-height="100"></i></a></li>
	</ul>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Статистика</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script>
	jQuery(document).ready(function($) {
	$('.stat-div li a i').each(function(e) {
	$(this).animate({
	height : $(this).data('height')+'%'
	},
	500, function() {
	// stuff to do after animation is complete
	console.log(e+'-ok');
	});
	});
	});
	</script>
	</script>
	<style>
	body {
	width: 600px;
	margin: 100px auto;
	}
	.stat-div {
	width: 250px;
	height: 100px;
	margin: 0;
	padding: 0;
	list-style: none;
	vertical-align: text-bottom;
	}
	.stat-div li {
	float: left;
	position: relative;
	width: 50px;
	height: 100px;
	}
	.stat-div li a {
	display: block;
	height: 100px;
	}
	.stat-div li a:hover {
	background: #fafafa;
	}
	.stat-div li a i {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	height: 0;
	background: #badaba;
	}

	</style>
	</head>
	<body>
	<span class="showstat">showstat</span>
	<ul id="main-header-stats" class="stat-div">
	<li><a href="#"><i data-height="58"></i></a></li>
	<li><a href="#"><i data-height="78"></i></a></li>
	<li><a href="#"><i data-height="18"></i></a></li>
	<li><a href="#"><i data-height="100"></i></a></li>
	</ul>

	</body>
	</html>