在一个元素上使用 jQuery fadeIn/fadeOut 会打乱它的定位答案

【问题标题】：Using jQuery fadeIn/fadeOut on an element scrumbles its positioning在一个元素上使用 jQuery fadeIn/fadeOut 会打乱它的定位
【发布时间】：2012-07-15 02:01:44
【问题描述】：

我有一个根据某些条件显示或隐藏的元素。我使用 jQuery fadeIn() 和 fadeOut() 动画来隐藏或显示元素。

我的问题是该元素的位置在淡出/淡入序列之后突然改变。但是我在计算的样式规则中找不到任何区别。既不是元素本身，也不是嵌入的 div 标签。序列后有什么变化？

我做了一个简短的测试用例： http://jsfiddle.net/2QVX8/14/

注意表格下方的三角形指向下方，它居中。当您单击“切换”按钮两次时，将运行淡出/淡入序列。之后，元素不再居中，而是位于最左边。

下面是测试用例的代码：

HTML：

<button id='toggle'>Toggle</button>
<p/>
<div>
      <table id="list">
        <tbody>
            <tr><td>1-1</td><td>1-2</td></tr>
            <tr><td>2-1</td><td>2-2</td></tr>
            <tr><td>3-1</td><td>3-2</td></tr>
        </tbody>
      </table>
      <div id="footer">
          <span>&#9662;</span>
      </div>
</div>

CSS：

table{
  width: 100%;
  border: 1px solid black;   
}
table tr td{
  text-align: center;  
}
#footer{
  position: absolute;
}

JS/jQuery：

$('#toggle').bind('click',function(){
    if ($('#footer span').is(':visible'))
       $('#footer span').fadeOut('fast');   
  else $('#footer span').fadeIn('fast');   
})

【问题讨论】：

什么是：<p> 没有关闭！什么是：</tr></tr>？
对不起，我的错，太着急了。我纠正了这些故障，它们与原始问题无关。谢谢！
没问题。我只用了一点 CSS 就解决了你的问题。

标签： jquery css animation

【解决方案1】：

我不太明白为什么，但是没有坐标的绝对位置会使其不稳定。试试这个：http://jsfiddle.net/tovic/2QVX8/15/

【讨论】：

是的，我也意识到了这一点。查看我自己对这个问题的回答：我删除了绝对定位，一切都很好。
虽然所有其他答案也能解决问题，但我接受这个答案，因为它是唯一真正解释为什么绝对定位是一个问题的答案。谢谢！

【解决方案2】：

你应该使用：

#footer span{
     position: relative;
}

【讨论】：

你抑制了测试用例中的效果。这是一种解决方法，可以更改布局以在此测试用例中获得所需的效果。在这里工作，但不是一般的解决方案或问题的答案。测试用例是我现实世界问题的简化版本。在那里我有一个 img 标签，而不是一个跨度。我无法将 img 设置为 width:100%;。我在测试用例中使用了一个 span 标签来保持简单。可能太简单了，抱歉。问题仍然是：序列运行前后的区别在哪里？
@arkascha 重新编辑了我的答案。很抱歉没有很好地解释您的想法。
不同之处在于您的元素是在开头打开的，并且由于文本对齐，子元素被浮动居中。但是一旦元素淡出，您就会失去文本对齐，因为没有空间容纳没有设置相对位置（相对于父级）的元素，或者至少 100% 的宽度将保持其在褪色父级内的大小。
我们朝着同一个方向思考：在我给自己的答案中，我还删除了绝对定位。这样可行。谢谢！

【解决方案3】：

试试这个：http://jsfiddle.net/2QVX8/18/

HTML：

<button id='toggle'>Toggle</button>
<p>
<div>
      <table id="list">
        <tbody>
            <tr><td>1-1</td><td>1-2</tr></tr>
            <tr><td>2-1</td><td>2-2</tr></tr>
            <tr><td>3-1</td><td>3-2</tr></tr>
        </tbody>
      </table>
      <div id="footer">
          <div class="arrow">&#9662;</div>
      </div>
</div>

CSS：

table{
  width: 100%;
  border: 1px solid black;   
}
table tr td{
  text-align: center;  
}

#footer{
  display: block;
  width: 100%;
  height: 1em;
  text-align: center;
  padding: 3px;
}

查询：

$('#toggle').bind('click',function(){
    if ($('#footer .arrow').is(':visible'))
       $('#footer .arrow').fadeOut('fast');   
  else $('#footer .arrow').fadeIn('fast');   
})

【讨论】：

你淡化了容器而不是元素。我不想这样做，因为除了这个问题之外还有其他布局问题。我需要保留容器。对不起。
嗯，我错过了什么吗？我能发现的唯一变化是您使用类而不是 id 选择器。但是为什么它会起作用呢？背后有什么区别？我希望应用相同的修改，因为选择器产生相同的元素集。
啊，现在我才看到你也从 span 中删除了绝对定位。这是我们其他人也得出的解决方案。使用类选择器而不是 id 选择器与解决方案无关。还是谢谢。

【解决方案4】：

好的，这可能是最简单的解决方案：

我删除了页脚的绝对 css 定位规则：

position:absolute;

请参阅fidler，除了该更改之外未更改：

【讨论】：