jQuery fadeTo（）然后通过显示来隐藏元素：none？

Question

我有2个不同信息的头元素，每个元素都希望在悬停事件中淡入/淡出。

我可以做淡入/淡出没问题，但我真的希望元素被隐藏，即使用“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'});  

    }); 

}); 

伟大的工程，但尽管这改变了每个项目的“不透明度”他们仍然一起存在于代码中，所以它就好像我有两个我不想要的头。

仅供参考我使用这个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

您只需在淡入之前（通常）显示#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(); 
    });    
}); 

试试吧here（注：红色div有含量少，这样你就可以看到效果）。

Answer 2

使用animate功能：

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

还是fadeInfadeOut功能：

$(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'});  

    }); 

}); 

Answer 3

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

AFAIK执行流程将防止在“fadeOut”结束之前“隐藏”执行。