Question

I have an element that is shown or hidden depending on some condition.
I use jQuery fadeIn() and fadeOut() animations to hide or show the element.

My problem is that the positioning of that element is suddenly changed after a fadeOut/fadeIn sequence. However I cannot find any difference in the computed style rules. Neither for the element itself nor for the embedding div tag.
What is changed after the sequence ?

I made a short test case:
http://jsfiddle.net/2QVX8/14/

Note the triangle below the table pointing down, it is centered. When you click the “toggle” button twice the fadeOut/fadeIn sequence is run. Afterwards the element is not centered any more but positioned hard left.

Here is the code of the test case:

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

I don’t quite understand why, but an absolute position without coordinates will make it unstable. Try this: http://jsfiddle.net/tovic/2QVX8/15/