Рассмотрим страницу, как показано ниже (псевдокод)
<header>
<search>
<form>
<input text> <input submit>
</form>
</search>
<menu>
<ul>
<li>File</li>
<li>Edit</li>
<li>Text</li>
</ul>
</menu>
</header>
<content></content>
<footer></footer>
Когда страница загружается, я хочу, чтобы заголовок отображался, скажем, 10 секунд, а затем исчезал в течение следующих нескольких секунд. Я могу выполнить это с помощью
jQuery.fn.delay = function(time, func){
return this.each(function(){
setTimeout(func, time);
});
};
$("header").delay(5000, function() { $(this).fadeOut(2000) });
Проблема заключается в том, что, когда заголовок исчезает, остальная часть страницы (контент, нижний колонтитул) поднимается вверх, чтобы занять место, занятое заголовком. Я хочу, чтобы заголовок был вроде "display: block" в этом, его место никогда не сдавалось.
Затем, после того, как заголовок исчез, я хотел бы вернуть его на mouseOver и снова исчезнуть на mouseOut. Я попробовал следующее
$("header").hover(function() { $(this).show("slow"); $(this).hide("slow") });
Но это не похоже на работу. Во-первых, заголовок загорается и выходит, а также приводит к тому, что остальная часть страницы перемещается вверх.
Как я могу выполнить эффект?