1

問題があります。助けてください。

次のようなテンプレートがあります。

<div id="dad">
     <div id="son" style="width: 100%">
     some code
     </div>
</div>

次に、jQueryアニメーションでdad-divを展開するアクションがあります

$('#dad').animation({'width': 800px}, 500);

この時点で、息子と父親は両方とも 800 ピクセルの幅で、私には問題ありません。

しかし、ajax fetch を使用してサーバーから新しい子要素を取得し、古い要素を置き換えると、サファリとクロムで奇妙なことが起こりました。

    $.get(url, extraData, function(response) {
        $('#son').hide('slide', null, 500, function(){
            $('#son').replaceWith(response);
            $('#son').show('slide', {direction: 'right'}, 500);
        });
    });

expand dad スクリプトは引き続き機能しますが、いくつかの違いがあります。IE と FireFox では、お父さんと息子のサイズが同時に変更されたため、効果はスムーズで良好に見えます。しかしSafariやChromeではこの工程が2段階に分かれており、まずお父さんをアニメーションで800pxに拡大し、次に息子を「ジャンプ」変更で800pxにして、この「ジャンプ」が後の工程を間違えてしまう。

IE と FireFox はこれを適切に処理したと思います。Safari と Chrome の修正を手伝ってくれる人はいますか?

4

1 に答える 1

1

jQueryにはメソッドがないのでreplace、メソッドを使いたいようです replaceWith。

$('#son').replaceWith(response);

要素を別の要素に置き換えることに注意してください。replaceWith要素の内容のみを変更したい場合は、htmlメソッドを使用できます。

$('#son').html(function(){
   return $(response).html();
});
于 2013-01-09T05:57:39.240 に答える