Подскажите пожалуйста, почему этот код иногда не работает с анимацией?
Вот пример
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>
