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()事件异步有关。

上面的两个代码，两个答案都运行得很好我的代码中有错字（整体）所以我在.load()之前调用了loadContent(c)函数，结果是内容立即加载，动画开始 - ＆GT;内容加载第二次 - ＆gt;动画结束了。

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

调用jQuery动画回调太快了

2 个答案: