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

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

正如在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;
});