Dwie postacie kodu jQuery - tylko jeden działa.

Witam. Mam, wydaje mi się, banalny problem. Otóż poniższy kod działa poprawnie:
 

$(document).ready(function()
{
			if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(".post55").offset().top)
				{
					$(".post55").addClass('animation-post');
				}
			$(window).scroll(function()
			{
				if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(".post55").offset().top)
				{
					$(".post55").addClass('animation-post');
				}
			});

			if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(".post54").offset().top)
				{
					$(".post54").addClass('animation-post');
				}
			$(window).scroll(function()
			{
				if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(".post54").offset().top)
				{
					$(".post54").addClass('animation-post');
				}
			});

});

Natomiast poniższy kod nie działa:
 

$(document).ready(function()
{
		for(var x=55;x>53; x--)
		{
			var post = ".post" + x;
			if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(post).offset().top)
				{
					$(post).addClass('animation-post');
				}
			$(window).scroll(function()
			{
				if ($(window).scrollTop() + document.documentElement.clientHeight*0.8 > $(post).offset().top)
				{
					$(post).addClass('animation-post');
				}
			});

	}

});

Moim zdanie te dwa kody powinny wykonać tą samą robotę. Niestety, kod z pętlą for nie działa i nie rozumiem dlaczego. Proszę i pomoc i z góry dziękuje :)