元素“闪烁”并在淡出/淡入上移动

Posted 2023-05-08

【中文标题】元素“闪烁”并在淡出/淡入上移动

【英文标题】：Element "flickers" and Moves on fadeOut/fadeIn

【发布时间】：2012-02-17 23:37:13

【问题描述】：

我正在使用以下代码来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）。所以我想知道是否有更正确的方法可以做到这一点，或者我是否在我的设计中犯了一些我不知道的基本错误。

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

【问题讨论】：

如果你在页面上加载其他隐藏的div，为什么你的href中有页面链接？ ...只是想知道

@hanzolo：哦，我忘了删除这些示例。它们就位是因为我计划在未启用 JavaScript 的情况下对站点进行更优雅的降级。但它们与这个问题的上下文无关。

【参考方案1】：

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

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

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

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

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

【讨论】：

有趣。我承认，多年来我一直反对使用绝对定位，但对于这个简单的小网站，它可能会让我的生活更轻松。

绝对定位没什么问题。但是你需要正确使用它。在很多情况下，相对于身体的绝对定位元素在不同的屏幕上并不是很可靠。 （例如我的快速示例）。但是，正如我在其余答案中所说，只要您在包装器中绝对定位，它就不会限制您页面的灵活性。

确实，关键一直是“正确使用它”（在这种情况下，我显然没有使用淡入淡出功能）。而且我在 UI 开发方面没有很多经验，所以像你这样的有用提示对我正确使用这些工具大有帮助。谢谢！

这就是我所缺少的......尝试了数千个例子，但没有任何结果......感谢您解释整个概念......

【参考方案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;
);

【讨论】：

啊，我明白了。我需要使用回调来等待动画正确完成。谢谢！

【参考方案3】：

我觉得很简单

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

应该有帮助