jquery - 元素 "flickers"和淡出/淡入移动

Question

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

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 中所示(至少在 Firefox 9.0.1 和 Windows 7 上的 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/