0

条件に応じて表示または非表示になる要素があります。要素を非表示または表示するには、jQuery の fadeIn() および fadeOut() アニメーションを使用します。

私の問題は、その要素の位置が、fadeOut/fadeIn シーケンスの後に突然変更されることです。ただし、計算されたスタイル ルールに違いはありません。要素自体も、埋め込み div タグも対象外です。シーケンス後に何が変更されますか?

短いテスト ケースを作成しました: http://jsfiddle.net/2QVX8/14/

テーブルの下にある下向きの三角形に注意してください。中央に配置されています。「トグル」ボタンを 2 回クリックすると、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');   
})
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;
}

Jクエリ:

$('#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;

その変更以外は変更されていないfidlerを参照してください。

于 2012-07-14T17:51:20.030 に答える