jQuery hover: исчезает в скрытом div, а затем исчезает по умолчанию
У меня есть два элемента div (один из них скрыт с помощью CSS), которые я чередую постепенно исчезая в общем пространстве при наведении курсора.
Это разметка:
<div id="wrap">
<div class="image">
<img src="http://domain.com/images/image.png">
</div>
<div class="text hide">
<p>Text text text</p>
</div>
</div>
И я применял этот код jQuery для затухания изображения - и затухания в тексте при наведении:
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap .text').fadeIn(100);
});
},
function(){
$('#wrap .text').fadeOut(100, function(){
$('#wrap .image').fadeIn(100);
});
}
);
});
</script>
Но проблема в том, что текстовый div становится липким и не исчезает - всегда, когда движение мыши слишком быстрое.
Знаете ли вы, где может быть решение этого?
Я настроил онлайн-тест:http://paragraphe.org/stickytext/test.html
Спасибо за любой совет