0

我有一个根据某些条件显示或隐藏的元素。我使用 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');   
})
4

4 回答 4

1

你应该使用：

#footer span{
     position: relative;
}
于 2012-07-14T17:40:19.987 回答
1

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

于 2012-07-14T17:42:02.300 回答
0

试试这个：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');   
})
于 2012-07-14T17:31:14.270 回答
0

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

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

position:absolute;

查看fdler，除了该更改之外未更改：

于 2012-07-14T17:51:20.030 回答