Countdown-счетчик на Jquery с эффектом прокрутки цифр

Добрый день, уважаемое хабросообщество. Решил представить свою наработку в виде статьи. Возможно, идея не нова и требует доработок, но если учесть то, что JQuery и JavaScript я изучаю всего около месяца то думаю вышло неплохо.

Итак, скрипт ведет обратный отсчет от указанного значения, используя при смене эффект прокрутки цифры. Разберемся как это все работает.

Разметка

Для начала верстаем основу для счетчика (не забыв предварительно подключить библотеку).

<div id="wrapper">
	<div id="counter_block">
		<div id="counter">
			<span id="first_num"></span><span id="second_num"></span>
		</div>
	</div>
</div>

В first_num и second_num будем выводить первую и вторую цифру нашего счетчика. Для корректного отображения добавим немного CSS.

#wrapper{
padding-top:200px;
}

#counter_block{
width:250px;
height:150px;
border:1px solid #000;
background:#ebebeb;
margin:0px auto;
overflow:hidden;
text-align:center;
font-size:40px;
font-family:Arial, sans-serif;
}

#counter{
height:150px;
line-height:150px;
overflow:hidden;
padding-left:100px;
padding-right:100px;
}

#first_num, #second_num{
position:relative;
float:left;
}

Так как для реализации эффекта прокрутки цифры будем использовать функцию animate и свойство opacity, то для first_num и second_num необходимо указать float:left;, как в листинге выше, иначе в IE 6-7 opacity изменяться не будет.

Эффект прокрутки цифры

Данный эффект достигается с помощью использования функции animate библиотеки Jquery. После того как счетчик изменил свое значение выполняется цепочка анимации.

$("идентификатор элемента").animate({top: "50px", opacity: 0.0}, 100)
	.animate({top: "-50px"}, 200, function(){$(this).html(second_num);})
	.animate({top: "0px", opacity: 1}, 100)
	.animate({top: "0px"} , 200);	

Сначала мы опускаем цифру вниз (в примере на 50px), постепенно изменяя значение свойства opacity элемент до 0. Далее поднимаем на такое же количество пикселей от исходного местоположения элемента. Так как свойство opacity у элемента равно 0, то пользователь не увидит эту операцию. После этого мы возвращаем элемент на изначальное место в блоке-родителе, постепенно изменяя свойство opacity на единицу. Вся цепочка выполняется в течении одной секунды, что со стороны пользователя выглядит как прокрутка цифр. После того как эффект реализован пишем сам счетчик.

Разработка скрипта счетчика

Для начала задаем начальное значение счетчика.

var first_num = 4;//первая цифра счетчика
var second_num = 0;//вторая цифра счетчика

Теперь пишем функцию счетчика используя выстроенную цепочку анимации при измении значения счетчика.

function timer(){ 
	
	if (second_num <= 0){//если вторая цифра счетчика меньше или равна 0
		second_num = 10;
		first_num = first_num - 1;	
		if (first_num >= 0)
			$("#counter #first_num").animate({top: "50px", opacity: 0.0}, 100)
				.animate({top: "-50px"}, 200, function(){$(this).html(first_num);})
				.animate({top: "0px", opacity: 1}, 100)
				.animate({top: "0px"} , 200);
	} 
		
	if (first_num <= -1){//если первая цифра счетчика меньше или равна -1
		second_num = 0;
		first_num = first_num + 1;
	}
		
	if (first_num == 0 && second_num == 0){
		//сюда можно вставить условие, которое будет выполняться когда счетчик дойдет до 0
	}
		
	else{
		second_num = second_num - 1;
		$("#counter #second_num").animate({top: "50px", opacity: 0.0}, 100)
		.animate({top: "-50px"}, 200, function(){$(this).html(second_num);})
		.animate({top: "0px", opacity: 1}, 100)
		.animate({top: "0px"} , 200);			
		setTimeout("timer()", 1000);
	}
	
}

И, наконец, при загрузке страницы выводим первую и вторую цифру и заново выполняем функцию.

$(document).ready(function() {
	$("#counter #first_num").html(first_num);//выводим первую цифру счетчика
	$("#counter #second_num").html(second_num);//выводим вторую цифру счетчика
	timer();//выполняем функцию счетчика
});

Благодарю за внимание, надеюсь данный вариант реализации countdown-счетчика будет полезен web-разработчикам. Посмотреть можно тут, исходники демо-примера забрать здесь.

P.S. Скрипт проверялся на работоспособность в IE7-8-9, Opera 11, FF 7-8, Chrome.