Question

我在页面上使用以下代码fadeOut和fadeIn内容div（jsfiddle here）...

HTML：

<ul>
  <li><a id="indexNav" href="index.html">Home</a></li>
  <li><a id="aboutNav" href="about.html">About</a></li>
</ul>

<div id="indexContent">
  This is the main page content.
</div>

<div id="aboutContent">
  This is the about page content.
</div>

CSS：

ul {
  float: left;
  display: block;
  margin-top: 50px;
  margin-left: 0px;
}

ul li {
  list-style: none;
  display: block;
  margin-top: 5px;
}

ul li a {
  display: block;
  height: 20px;
  width: 50px;
  margin: 0px;
  background: #7d5900;
  color: white;
  text-decoration: none;
  text-align: center;
}

div {
  width: 300px;
  height: 200px;
  margin: auto;
  margin-top: 70px;
  color: white;
  background-color: rgba(0, 36, 125, 0.5);
}

#aboutContent {
  display: none;
}

JavaScript的：

$('#indexNav').click(function() {
  $('#aboutContent').fadeOut('fast');
  $('#indexContent').fadeIn('fast');
  return false;
});

$('#aboutNav').click(function() {
  $('#indexContent').fadeOut('fast');
  $('#aboutContent').fadeIn('fast');
  return false;
});

正如the jsfiddle（至少在Windows 7中的Firefox 9.0.1和IE 9中）所示，当在链接之间来回点击以显示/隐藏相关元素时，有一点页面范围的闪烁作为元素动画。基本上，div移动到页面的下方，导致滚动条出现并向左推动div，然后在动画结束时恢复正常。

无论如何我都不是CSS的专家，我只是在尝试实现简单的淡出/淡入效果（使用jQuery，自然而然）。所以我想知道是否有更正确的方法可以做到这一点，或者我是否在我的设计中犯了某种根本性的错误，而我却不知道。

关于可能导致此闪烁的原因以及如何纠正它的任何想法？

Answer 1

发生这种情况是因为您的元素相对显示。这意味着当两者都出现在屏幕上时，它们会相互移动。当你进行交叉淡入淡出时，它实际上就是你正在做的事情，它们都会在屏幕上显示一段时间。您需要绝对定位元素以占据相同的空间。

#aboutContent, #indexContent {
    position: absolute;
    top: 10px;
    left: 50px;
}

示例：http://jsfiddle.net/2TDj5/

您可以将元素放在包装器div中，这样您就可以相对于页面定位它们，但相对于彼此是绝对的。只需确保将包装器显式设置为display: relative。

示例：http://jsfiddle.net/2TDj5/1/

Answer 2

$('#indexNav').click(function() {
    $('#aboutContent').fadeOut('fast',function(){
        $('#indexContent').fadeIn('fast');
    });
    return false;
});

$('#aboutNav').click(function() {
    $('#indexContent').fadeOut('fast',function(){
        $('#aboutContent').fadeIn('fast');
    });
    return false;
});

Answer 3

我认为简单

.delay( 1 ).fadeIn(...)

应该帮助

元素“闪烁”并在fadeOut / fadeIn上移动

3 个答案: