Question

我发现我的动画需要长时间执行（相互之间） - 实际上是否可以一次设置多个关闭？

已发布的副本http://colourednoise.co.uk/closing/

目前发生了什么：淡入＆gt;展开＆gt;淡出 - 然而前两个步骤似乎停滞了一点..我可以合并它们吗？ I.e让它稍微褪色，同时它开始扩展，以提供更顺畅的整体体验。

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)
    });
}

我希望让动画淡出与扩展混合的另一个原因是因为我发现扩展动画非常......紧张不安？

Answer 1

jquery中的动画可以选择queue，默认为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/

请注意，由于此排队行为，您无需将所有这些动画嵌套在另一个中。它们可以简单地被链接，并且可以实现相同的效果。

一次解决多个jQuery动画

1 个答案: