Jquery “元素”；闪烁“；并继续淡出/淡出

我正在使用以下代码对页面（）上的

fadeOut

和

fadeIn

内容div执行操作

HTML:

JavaScript:

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

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

如中所示（至少在Firefox 9.0.1和Windows 7上的IE 9中），当在链接之间来回单击以显示/隐藏所讨论的元素时，随着元素的动画化，页面范围内会有一点闪烁。基本上，

div

在页面上向下移动很远，这会导致出现一个滚动条，并将

div

向左推一点，然后在动画结束时恢复正常

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

---

您知道是什么导致了这种闪烁，以及如何纠正它吗？

之所以会出现这种情况，是因为您的元素是相对显示的。这意味着当两者都出现在屏幕上时，它们会相互移动。当你做一个交叉淡入，这基本上是你正在做的，他们都将在屏幕上的一段时间。您需要绝对定位元素以占据相同的空间

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

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

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

例如：

您可以将这些元素放在包装器div中，这将允许您相对于页面定位它们，但它们之间是绝对的。只需确保将包装器显式设置为

display:relative

示例：

我认为

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

---

应该有帮助

啊，我明白了。我需要使用回调函数来等待动画正确完成。谢谢如果在页面上加载其他隐藏的div，为什么在hrefs中有页面链接。。。只是wondering@hanzolo：哦，我忘了把那些拿出来作为例子。它们之所以存在，是因为我计划在不启用JavaScript的情况下对站点进行更优雅的降级。但它们与这个问题的背景无关。很有趣。我承认，多年来我一直反对使用绝对定位，但对于这个简单的小网站来说，它可能会让我的生活更轻松。绝对定位没有错。但是你需要正确地使用它。在很多情况下，相对于身体的绝对定位元素在不同的屏幕上不是很可靠。（例如我的快速示例）。但是，正如我在回答的其余部分中所说的，只要你在包装器中占据绝对位置，它就不会限制你页面的灵活性。事实上，关键一直是“正确使用它”（在本例中，我甚至没有使用淡入淡出功能）。我对UI开发没有太多经验，所以像你这样的有用提示对我正确使用这些工具有很大帮助。谢谢这就是我所缺少的…尝试了数千个例子，但都没有成功…谢谢你解释了整个概念。。。

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

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