2

jQuery の slideUp と slideDown をテーブルで使用すると、小さな問題が発生します。私はこのようなhtmlを持っています(これも主にjQueryによって生成されますが、重要ではありません):

<tr class="expandable-container">
  <td colspan="10">
    <div id="3_expandable" style="display: none;">
      <table class="innerTable">
        ...
      </table>
    </div>
  </td>
</tr>

外部テーブルのスタイル:

.main-table {
    border-radius: 0.5em 0.5em 0 0;
    width: 129em;
    background-color: #f1f1f1;    
    margin-top: 1.5em;
    z-index: 10;
    position: relative;
}

.main-table td, .main-table th {
    padding: 1.2em 0.7em;
    border-collapse: collapse;
    border-left: 0.1em solid #dedede;
}

.main-table td:first-child, .main-table th:first-child {
    border-left: 0 solid;
}

.expandable-container td {
    padding: 0 !important;
    background-color: red; /* inserted to identify the problem */
}

slideUp と slideDown はテーブル要素では機能しないため、コンテンツ (これは別のテーブルですが、重要ではありません) を div でラップしましたが、これはもちろん非表示になっています。slideUp メソッドと slideDown メソッドを適用して Firefox 6 でテストしたところ、何らかの理由でアニメーションがスキップしているように見えました。そこで、スライド時間を 10 秒に設定して調べたところ、アニメーションが始まると、td 要素が高さ == 20px ですぐに表示され、その中で div が下にスライドすることがわかりました。その後、すべてが期待どおりに進みます-divがtdの最初の予期しない高さを超えると、divがカバーされ、意図したサイズに拡張されます。

これは Firefox 6 で発生します。Chrome 13 では問題なく動作します。IE のどのバージョンでもテストしていません。IE は意図したブラウザではないため、インストールに苦労する必要はありませんでした。 Linux マシン。また、修正される予定の他のスクリプトがクラッシュするため、Opera でもテストされていません。

スライドダウンアニメーションの最初の瞬間のスクリーンショットを添付しています-tdがどこからともなく現れたとき（赤い背景）。

slideDown - 第 1 フェーズ

私の質問 - それを修正する方法または回避策はありますか?

Ariel が提案したように、jsFiddle として追加しました。奇妙なことに、FF6 でもうまく動作します: jsFiddle レンディション

編集: Opera 11 でクラッシュの原因となった問題を修正したので、テストすることができました。つまり、Opera 11 でも発生します。

4

1 に答える 1

2

フィドルとあなたの症状に基づいて、パディングまたはマージン（おそらくマージン）に関係していると思います。つまり、要素が表示されるとすぐに、高さのアニメーションには含まれないマージンがあります。

しかし、私はそれが起こっているのを見ないので、確かに答えることはできません。（おそらく、フィドルと実際のコードの違いを理解しようとする必要があります-cssのセクションをコメントアウトしてみてください。）

于 2011-09-14T08:56:25.240 に答える