Javascript-форум - Временами не работает анимация

Подскажите пожалуйста, почему этот код иногда не работает с анимацией?
Вот пример http://learn.javascript.ru/play/xwLUf
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Подсказка tooltip</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$.fn.tooltip = function(){
		function getTooltipBox(content, element)
		{
			if($('.wrapper-tooltip-box').css('display') != 'block')
				$('<div class="wrapper-tooltip-box"><div class="tooltip-box">'+content+'</div></div>').appendTo('body');
			var tooltip = $('.wrapper-tooltip-box');
			if(document.body.scrollTop > element.position().top - tooltip.outerHeight())
				tooltip.css({'top': element.position().top + element.outerHeight() + 5 - 20, 'left': element.position().left + element.outerWidth() / 2 - tooltip.outerWidth() / 2, 'background': 'url(bg/pointer_top.png) 50% 0 no-repeat',});
			else
				tooltip.css({'top': element.position().top - tooltip.outerHeight() - 5 - 20, 'left': element.position().left + element.outerWidth() / 2 - tooltip.outerWidth() / 2, 'background': 'url(bg/pointer_bottom.png) 50% 100% no-repeat',});
		}
		this.each(function(){
			var title = $(this).attr('title');			
			$(this).hover(function(){				
				$(this).removeAttr('title'); getTooltipBox(title, $(this));
				var tooltip = $('.wrapper-tooltip-box');
				tooltip.animate({
					'opacity': 1,
					'top': tooltip.position().top + 20,
				}, 300);
			}, function(){
				$('.wrapper-tooltip-box').remove();	$(this).attr('title', title);
			});
		});
	}
	$('*[title]').tooltip();
});
</script>
<style type="text/css">
*{margin:0; padding:0;}
.wrapper{
	display:block;
	border:2px solid #c0c0c0; margin:10px auto;
}
.wrapper img{}
.wrapper-tooltip-box{
	display:block;
	position:absolute; padding:7px 3px;
	opacity:0;
}
.tooltip-box{
	display:block;
	padding:5px 10px;
	background:#eee; color:#1d1d1d; box-shadow:0 0 2px #1d1d1d;
}
</style>
</head>

<body>
	<div class="wrapper"><img src="img/1.jpg" title="Картинка 1" /></div>
    <div class="wrapper"><img src="img/2.jpg" title="Картинка 2" /></div>
    <div class="wrapper"><img src="img/3.jpg" title="Картинка 3" /></div>
    <div class="wrapper"><img src="img/4.jpg" title="Картинка 4" /></div>
    <div class="wrapper"><img src="img/5.jpg" title="Картинка 5" /></div>
</body>
</html>