1

jQueryUI を使用して、テーブルの列をビューの外にスライドさせてから戻そうとしています。残念ながら、正しい列の幅と位置を保持していないように見えるため、列が間違った場所に配置されてしまいます。

私が直面している問題の蒸留版はhttp://jsfiddle.net/Z76xE/6/にあります。望ましくない動作のさまざまなバリエーションを見てきましたが、ここで指摘されている単純なケースは、展開操作で混乱するだけです: 最初に、CSS が固定する 150px よりも大きくなるように列を展開し、次に端は左端をスナップして、列を再び 150px にし、テーブルの左側に空の空白を残します。

これをいじり、JavaScript をトレースする無限の時間の中で、jQuery が CSS で宣言されたものとは異なる列幅を取得していることに気付きました。したがって、jQuery / jQueryUI に列幅の理解を更新するように [指示しない] ことで、私は何か間違ったことをしています。どこにあるのかわからない！

ご意見ありがとうございます。

4

1 に答える 1

1

DOM インスペクタを開いてアニメーションを見ると、<td>が でラップされ、<div>が<div>アニメーション化されることがわかります。ただし、これは次のとおりです。

<tr>
    <div>
        <td></td>
    </div>
</tr>

は無効な HTML であるため、ブラウザがそれでどんな奇妙で素晴らしいことをしようとしているのか誰にもわかりません。私たちは、それが行う奇妙なことを 1 つ知っています:<td>アニメートして開いたときに、間違った場所に を残します。

テーブル要素の配置と表示をいじるのは少し悪夢なので、避けたほうがよいでしょう。HTML を次のように変更した場合:

<td>
    <div id="NavColumn">
        I am the left-side column
    </div>
</td>

その後、運が良くなります：http://jsfiddle.net/ambiguous/VUvCw/

必要なビジュアル レイアウトを得るには、CSS を少し調整する必要がありますが、その構造によってアニメーションが整理されるはずです。

于 2012-05-10T04:13:52.550 に答える