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)所以我在loadContent(c)本身之前调用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