jQuery动画回调调用太快

Question

所以我试图通过这样做来为.load('content.html') 函数设置动画。

function loadContent(c) {
    $('#main-container').stop().animate({
        opacity: 0,
    }, 300, function() {
        $('#main-container').load('./content/' +  c + '.html');
        $(this).stop().animate({
            opacity: 1,
        }, 600);
    });
}

这很简单，我想将不透明度设置为0，加载新内​​容并将不透明度设置回1。问题是在调用函数后立即加载内容，因此在'opacity 0' 发生之前内容会发生变化。我也试过这段代码

function loadContent(c) {
    $('#main-container').stop().animate({
        opacity: 0,
    }, 300, function() {
        setTimeout(function() {
            $('#main-container').load('./content/' +  c + '.html');
        }, 600);

        $(this).stop().animate({
            opacity: 1,
        }, 600);
    });
}

但结果是一样的。有什么提示吗？

我认为这与.animation() 事件异步有关。

---

上面的两个代码和两个答案都可以正常工作我的代码（整体）中有错字，所以我在loadContent(c) 本身之前调用了.load() 函数，结果是内容立即加载，动画开始-> 内容加载第二次 -> 动画结束。

Answer 1

您需要将上一个动画作为回调函数传递给load()：

function loadContent(c) {
    $('#main-container').stop().animate({
        opacity: 0
    }, 300, function() {
        $('#main-container').load('./content/' +  c + '.html', function() {
            $(this).stop().animate({
                opacity: 1
            }, 600);
        });
    });
}

这是一个小提琴：http://jsfiddle.net/Lp728/

Answer 2

怎么样：

function loadContentCOMMAS(c) {
    $('#main-container').stop().animate({
        opacity: 0
    }, 300);
    $('#main-container').promise().done(function () {
        $('#main-container').load(c,function () {;
            $(this).stop().animate({
                opacity: 1
            }, 600);
        });
    });
}

编辑：

这是FIDDLE