Question

我有两个#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'});      

   });

 });

哪个效果很好但是虽然这会改变每个项目的“不透明度”，但它们仍然存在于代码中，所以就好像我有两个我不想要的标题。

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

使用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'});      

   });

 });

Answer 2

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

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

Answer 3

您必须在淡入（正常）之前显示#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的内容较少，因此您可以看到效果。）。

jQuery fadeTo（）那么通过使它显示来隐藏元素：none？

3 个答案: