2

特にこれが私の仕事である場合、これはばかげた質問のように見えるに違いありませんが、CSS と JavaScript の配置とサイズ設定について、私が理解できない微妙な点があります。

オブジェクトを「アニメーション化」する関数があります (特定のイージング関数を使用してプロパティを変更します)。アニメーションが進行するたびに、テスト div のサイズを変更するコールバックが呼び出されますが、div はそのまま残ります。それは非常に単純でなければなりませんが、私はそれを理解していません。

ここにフィドルがあります：http://jsfiddle.net/sd9tJ/

そして、質問を送信できるコードの一部:D

$(document).ready(function() {

    var surface = {w : 100, h : 100};

    var $div = $('#test');

    $t.animate(surface, {w : 200, h : 200}, 2000, $t.easing.linear, function() {
        document.body.innerHTML += '('+Math.round(surface.w)+'/'+Math.round(surface.h)+')';
        $div.css({
            width  : Math.round(surface.w) + 'px',
            height : Math.round(surface.h) + 'px'
        });
    });
});

値は正しいですが、スタイルは更新したくないので、CSS に関連していると思います。

何か案が ？

あなたの助けをありがとう:)

4

2 に答える 2

2

次のように変更します。

   $('#test').css({
        width  : Math.round(surface.w) + 'px',
        height : Math.round(surface.h) + 'px'
    });
于 2013-07-22T19:00:13.120 に答える
2

問題は、そのデバッグ手法にあります。

    document.body.innerHTML += ... ;

これにより、 の元の HTML が取得され、<div>ページの読み込み時に元のように再追加されます。それを取り出すと、うまくいきます。

edit —$('#test')ハンドラーで使用すると機能する理由は、jQuery が外に出て要素を再度検索するようになるためです。したがって、更新されたものを見つけ、物事が機能します。

そのようにドキュメントに追加すると問題が発生する理由は、次と同じだからです。

    document.body.innerHTML = document.body.innerHTML + whatever;

現在のものを取得すると、要素のスタイルが更新されずにinnerHTMLページが取得されます。次に、ページ DOM 全体を再作成します。を使用するか、ページに特別な要素を作成して、その HTML のみを更新します。console.log()

于 2013-07-22T19:02:59.877 に答える