3

この質問は、アニメーションのキューイングを防ぐことに関する他の質問と似ているように見えるかもしれませんが、この質問は異なります。

説明のために、jsFiddleで簡略化した例を作成しました。（この例では、＃boxをwidth：50％に設定することもできますが、私が取り組んでいる実際のアプリケーションはより複雑で、box要素に対して複雑な計算が必要です）。

中に箱が入った容器があります。コンテナのサイズを変更するときは、ボックスをアニメーション化して特定のサイズにサイズ変更する必要があります。

ただし、結果ボックスのサイズをゆっくりと（1秒間にわたって）変更すると、＃boxのサイズがぎくしゃくして変更されます。

http://jsfiddle.net/B7UGm/

$('#container').resize(function() {
    $("#box").animate({'width':$('#container').width() * 0.5});
});

最適には、アニメーションを1つにマージして、サイズがスムーズに変化するようにします。

ありがとう！

4

3 に答える 3

4

セットstop(true, true)。

$('#container').resize(function() {
    $("#box").stop(true, true).animate({'width':$('#container').width() * 0.5});
});

デモ

于 2012-09-17T03:31:26.520 に答える
4

次に、css3トランジションを使用できます。

#box
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

これが機能するかどうか教えてください:)

于 2012-09-17T03:32:32.713 に答える
0

たとえば、.delay（）を使用することもできます。

$('#foo').slideUp(300).delay(800).fadeIn(400);
于 2012-09-18T19:05:41.030 に答える