Question

我根据某些条件显示或隐藏了一个元素。我使用jQuery fadeIn（）和fadeOut（）动画来隐藏或显示元素。

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

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

请注意表格下方的三角形朝下，它居中。当您单击“切换”按钮两次时，将运行fadeOut / fadeIn序列。之后元素不再居中，而是向左硬着。

以下是测试用例的代码：

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

Answer 1

您应该使用：

#footer span{
     position: relative;
}

Answer 2

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

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

JQUERY：

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

Answer 4

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

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

position:absolute;

请参阅fidler，除了该更改之外没有变化：

在元素上使用jQuery fadeIn / fadeOut可以改变它的定位

4 个答案: