Блог

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

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

Проблема в том, что когда верхний колонтитул исчезает, остальная часть страницы (содержимое, нижний колонтитул) увеличивается, чтобы занять место, занимаемое header . Я хочу, чтобы заголовок был чем-то вроде «display: block», в котором его место никогда не уступается.

Затем, после того, как заголовок исчез, я хотел бы вернуть его при наведении курсора мыши и снова исчезнуть при наведении курсора мыши. Я попробовал следующее

 $("header").hover(function() { $(this).show("slow"); $(this).hide("slow") });
  

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

Как я могу добиться эффекта?

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

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

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

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

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

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

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

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

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

  $('#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 внутренне устанавливает непрозрачность, равную второму параметру.

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

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

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

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

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

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