Question

考虑如下页面（伪代码）

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

但是，这似乎不起作用。一，标题弹出和弹出，也会导致页面的其余部分向上移动。

我该如何完成效果？

Answer 1

.fadeOut()使用display: none;结束，如果您不想这样做，请改用.fadeTo()（最后不会设置display），像这样：

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

（请注意，这会使用built-in .delay() function）

You can try out a full demo here，悬停功能褪色且不会引起移动，如下所示：

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

Answer 2

使用visibility:hidden，它会像display:none一样隐藏元素，但布局不会改变。

您可以使用动画功能。 e.g。

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

你也可以使用Nick提到的fadeTo。 fadeTo在内部将不透明度设置为等于第二个参数。

Answer 3

在标题周围添加一个容器，并使用display:block和固定的宽度/高度设置样式。当淡出标题时，容器将保留标题占用的空间。

这样你就有了一个绑定hover事件的元素，用于在标题淡出后重新显示标题。隐藏后，标题将无法接收自己的hover事件，因此容器必须在其位置接收它们。

Answer 4

尝试向hide函数添加一个回调函数，将其更改为隐藏的可见性。

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

如果jQuery允许您指定在隐藏某些内容时是使用显示还是可见性，那将是很好的，但我不认为它。

Answer 5

你可以把标题放在另一个中，并将div设置为与标题相同的高度。然后，如果jQuery删除了标题，它将不会影响页面。

或者，正如Lobo所说，你可以让它使用可见性：隐藏，但我想很难强迫jQuery不设置它显示：无论如何。

Answer 6

绝对定位您的标题，这样它的存在（或缺少它）不会影响其他页面元素

jQuery，隐藏div而不会打扰页面的其余部分

6 个答案: