0

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

已出版的副本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)
    });
}

我想让淡入淡出动画与展开混合的另一个原因是因为我发现展开动画非常......紧张？

4

1 回答 1

3

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/

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

于 2013-07-02T20:41:55.410 回答