jquery - クロスブラウザでコンテンツdivを非表示にする方法は?

Question

animate を使用していくつかのコンテンツ div show hide を実行していますが、固定幅で動作していることを示していますが、幅なしで実行したいのですが、縮小するときもブラウザーをクロスする必要があります。

コードの提案または変更。

jsfiddle http://jsfiddle.net/sureshsummy/xUKRf/5/

Answer 1

固定幅の問題の解決策は次のとおりです。

$("#content").animate({
    width: $('body').width() -100
}, {
    queue: false,
    duration: 10
}).toggle();

編集: 非表示をアニメーション化するには、アニメーション関数をトグルに再度配置します。

$("#content").animate({
    width: $('body').width() -100
}, {
    queue: false,
    duration: 1000
}).toggle({
    width: 100
}, {
    queue: false,
    duration: 1000
});

Answer 2

レスポンシブにするために、幅、パディング、またはマージンに固定メジャー（px）を使用しないでください。代わりに、% を使用できます。

私はあなたのCSSにいくつかの微調整を行いました: http://jsfiddle.net/xUKRf/10/

コンテナとコンテンツ div の幅、パディング、マージンを % に変更しました