JQuery, скрыть div без нарушения остальной части страницы

Рассмотрим страницу, как показано ниже (псевдокод)

<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") });

Но это не похоже на работу. Во-первых, заголовок загорается и выходит, а также приводит к тому, что остальная часть страницы перемещается вверх.

Как я могу выполнить эффект?

Ответы

Ответ 1

.fadeOut() заканчивается с помощью display: none;, если вы не хотите этого делать, используйте .fadeTo() (который не будет устанавливать display в конце), например:

$("header").delay(5000).fadeTo(2000, 0);

(обратите внимание, что используется встроенная функция .delay())

Здесь вы можете попробовать полную демонстрацию, при этом функция зависания замирает и не вызывает движения, например:

$("header").hover(function() { 
  $(this).fadeTo(600, 1); 
}, function() { 
  $(this).fadeTo(600, 0); 
});

Ответ 2

Используйте visibility:hidden, он скроет элемент так же, как display:none, но макет не изменится.

Вы можете использовать функцию анимации. например.

 $('#header').animate({opacity: 0}, 2000);

 $("#header").hover(
     function() {  
       $(this).animate({opacity: 1}, 400);
       // you can also use one of the below
       // $(this).css("opacity","1"); 
       // $(this).fadeTo(400, 1);
     },
     function() { 
       $(this).animate({opacity: 0}, 400);
     }
 );

Вы также можете использовать fadeTo, как упоминал Ник. fadeTo внутренне устанавливает непрозрачность, равную второму параметру.

Ответ 3

Добавьте контейнер вокруг заголовка и настройте его с помощью display:block и фиксированной ширины/высоты. Когда вы уменьшите заголовок, контейнер сохранит пространство, занятое заголовком.

Таким образом, у вас есть элемент для привязки события hover, для повторного отображения заголовка после его исчезновения. После скрытия заголовок не сможет получать свои собственные события hover, поэтому контейнер должен получить их на своем месте.

Ответ 4

Попробуйте добавить обратный вызов к функции hide, которая изменит ее на скрытую видимость.

$(this).hide("slow", function(){
   $(this).css("visibility", "hidden");
   $(this).css("display", "block");
});

Было бы неплохо, если jQuery позволит вам указать, использовать ли отображение или видимость при скрытии чего-то, но я не думаю, что это так.

Ответ 5

Вы можете просто поместить заголовок внутри другого и стиль, чтобы div был такой же высоты, как и заголовок. Затем, если jQuery удалил заголовок, это не повлияет на страницу.

В качестве альтернативы, как говорит Лобо, вы можете использовать видимость: скрытый, но я думаю, что будет трудно заставить jQuery не устанавливать его отображение: none anyway.

Ответ 6

Поместите свой заголовок абсолютно таким образом, его присутствие (или его отсутствие) не повлияет на другие элементы страницы