Обратная анимация
 

Добрый вечер, возникла такая проблема, есть код:

<script type="text/javascript">
	$(document).ready(function(e) {
		var rand = function(min, max) {
			return Math.floor(arguments.length > 1 ? (max - min + 1) * Math.random() + min : (min + 1) * Math.random());
		};

		$('.status-icon .status-icon-count').height(0);
        $('#status').each(function(i, el) {
			
			var serv = $(this);
			
        var online = $(this).find('.status-count span').html();
		
		var num = 0;
		var up_up = setInterval( function() {
			if(num > online){
				clearInterval(up_up);
			}
				num = parseFloat(num) + parseFloat(rand(50,100));
				num =  Math.ceil(num);

				serv.find('.status-count span').html(num);
			}, 20);
		
		
		$(this).find('.status-icon-count').animate({height:online/5000*100+'%'},1500);
    });
    });
</script>

Его задача выполнять наложение одной картинки поверх другой при определенном значении height (от 0 до 100%), тем самым инициируя прогресс онлайна. Проблема состоят в том, что наложение одной картинки на другую происходит сверху вниз, мне нужно что бы это выполнялось снизу вверх т.к. по задумке там идет цветовая гамма и нужно именно такое положение.

Заранее благодарю всех за помощь.

F1ame,
а полноценный макет ... где ваше css html

<div class="status-icon">
				<div class="status-icon-count"></div>
			</div>

.status-icon {
	background: url(../images/status-icon.png) no-repeat;
	width: 82px;
	height: 82px;
}

.status-icon-count {
	background: url(../images/icon-status-count.png)  no-repeat;
	width: 82px;
	float: left;
	transition: all 4000ms ease;
	-khtml-transition: all 4000ms ease;
	-moz-transition: all 4000ms ease;
	-ms-transition: all 4000ms ease;
	-o-transition: all 4000ms ease;
	-webkit-transition: all 4000ms ease;
}

как такое может быть???

F1ame,
да и макет нужен полноценный с возможностью запуска