0

アニメーションを (相互に) 実行するのに時間がかかりすぎていることがわかりました。一度に複数のアニメーションをオフに設定することは実際には可能ですか?

公開されたコピーhttp://colourednoise.co.uk/closing/

現在何が起こっているか:フェード イン > 展開 > フェード アウト- ただし、最初の 2 つのステップが少し遅れているようです..それらをマージできますか? つまり、全体的によりスムーズなエクスペリエンスを提供するために、拡張し始めている間、わずかにフェードします。

jQuery(document).ready(function() {
    positionElements();

    var fontSize = 60,
        goodbyeFadeIn = 1000,
        goodbyeAnimation = 1500,
        goodbyeFadeOut = 1000;

    jQuery('#goodbye').fadeIn(goodbyeFadeIn, function() {
        jQuery(this).animate({
            fontSize: fontSize
        }, goodbyeAnimation, function() {
            jQuery(this).fadeOut(goodbyeFadeOut, function() {

                jQuery('#content').fadeIn();
            });
        });
    });
});

jQuery(window).resize(positionElements);

function positionElements() {
    var documentWidth = jQuery(document).width(),
        documentHeight = jQuery(document).height(),
        goodbyeWidth = jQuery('#goodbye').width(),
        goodbyeHeight = jQuery('#goodbye').height(),
        contentWidth = jQuery('#content').width(),
        contentHeight = jQuery('#content').height();

    jQuery('#goodbye').css({
        left: (documentWidth / 2) - (goodbyeWidth / 2),
        top: (documentHeight / 2) - (goodbyeHeight / 2)
    });

    jQuery('#content').css({
        left: (documentWidth / 2) - (contentWidth / 2),
        top: (documentHeight / 2) - (contentHeight / 2)
    });
}

フェードイン アニメーションをエキスパンドとミックスしたいもう 1 つの理由は、エキスパンド アニメーションが非常にぎくしゃくしていることがわかっているためです。

4

1 に答える 1

3

queuejquery のアニメーションには、デフォルトでのオプションがありますtrue。の場合false、アニメーションはすぐに実行され、前のアニメーションが終了するのを待ちません。次のようなことができます。

$('#goodbye').fadeIn({duration: goodbyeFadeIn, queue: false}) // run outside of the queue
             .animate({  // animate queued, but runs immediately as queue is currently empty
                 fontSize: fontSize
             }, goodbyeAnimation)
             .fadeOut(goodbyeFadeOut, function() {  // fadeOut is queued and will run when animate finishes
                 jQuery('#content').fadeIn();
             });

http://jsfiddle.net/wyEwB/

このキューイング動作により、これらのアニメーションをすべて入れ子にする必要はありませんでした。それらを単純に連鎖させるだけでも、同じ効果が得られます。

于 2013-07-02T20:41:55.410 に答える