一次触发多个jQuery动画

Question

我发现我的动画要花很长时间才能执行（彼此播放）-实际上一次可以设置多个动画吗？

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

当前正在发生什么： 淡入>展开>淡出 -但是前两个步骤似乎停滞了一点。我可以合并它们吗？ 也就是说，它在开始扩展时会略微褪色，以提供整体更流畅的体验。

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/

请注意，由于这种排队行为，您不需要将所有这些动画彼此嵌套。 它们本来可以简单地链接在一起，并且可以达到相同的效果。