jQuery fadeTo () ТО затем скрывает элемент, заставляя его отображать: нет?

Question

У меня есть 2 #header-элемента с различной информацией в каждом, которые я хочу добавить / исчезнуть при событии наведения мыши.

Я могу сделать вывод / вывод без проблем, НО я действительно хочу, чтобы элементы были скрыты, то есть используя "display: none;" ПОСЛЕ того, как они исчезли, и ТОГДА верните их, как только они исчезнут.

У меня есть это уже для исчезновения:

$(document).ready(function()
{ 

  $("#header").hover
   (function()
   {
    $(this).fadeTo("fast", 0);
     $('#header_hover').fadeTo("fast", 1.0);    
   },
   function()
   {
    $(this).fadeTo("fast", 1.0); 
     $('#header_hover').fadeTo("fast", 0); '5'});      

   });

 });

Это прекрасно работает, но, хотя это меняет «непрозрачность» каждого элемента, они все еще существуют вместе в коде, так что, как будто у меня есть 2 заголовка, которые мне не нужны.

FYI Я использую этот CSS, чтобы показать один заголовок за другим:

    #header, #header_hover
{
 height:260px;
 padding:0;
 margin:20px 10px;
 position:absolute;
 top:20px;
}

#header
{
 background:red;
 z-index:10;
}
#header_hover
{
 background:blue; 
 z-index:5;
}

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

Answer 1

$(element).fadeOut("slow").hide();

AFAIK поток выполнения предотвратит выполнение «hide» до завершения «fadeOut».

Answer 2

Вам просто нужно показать #header_hover до появления (обычно) и скрыть #header после исчезновения (с помощью обратного вызова).

$("#header").hover(function() {
    $(this).fadeTo("fast", 0);
    $('#header_hover').show();
    $('#header_hover').fadeTo("fast", 1.0);    
}, function() {
    $(this).fadeTo("fast", 1.0);
    $('#header_hover').fadeTo("fast", 0, function() {
        $(this).hide();
    });               
});

Попробуйте здесь (Примечание: красный div имеет меньше содержимого, поэтому вы можете увидеть эффект.).

Answer 3

Используйте функцию animate :

$(this).animate({opacity: 'toggle'}, 'fast');

Или функция fadeIn fadeOut :

$(this).fadeOut('fast');

как то так:

$(document).ready(function()
{ 

  $("#header").hover
   (function()
   {
    $(this).fadeOut("fast");
     $('#header_hover').fadeIn("fast");    
   },
   function()
   {
    $(this).fadeIn("fast"); 
     $('#header_hover').fadeOut("fast"); '5'});      

   });

 });