Question

我使用这个脚本加载一些div的内容，在另一个div中：

$(function() {
        $('#menu a').click(function(e) {
            e.preventDefault();
            var h = $(this).attr('href');
            $('#aqui').hmtl($(h).html()).fadeOut('slow').fadeIn('slow');
            //alert(h);
        });
    });

但是，正如您在此处看到的那样：http://jsfiddle.net/8rB3S/，内容在fadeOut()效果之前加载。

我尝试这个提示：https://stackoverflow.com/a/2745494/588842，但是.html()，这不起作用....这只是fadeOut而不是fadeIn

类似的东西：$('#aqui').fadeOut('slow').hmtl($(h).html, function(){$(this).fadeIn('slow');})

Answer 1

html()是同步的，传递回调函数不会做任何事情。

另一方面，

fadeOut()是异步的。因此，首先调用它并提供一个修改标记的回调函数，然后将元素淡入：

$("#aqui").fadeOut("slow", function() {
    $(this).html($(h).html()).fadeIn("slow");
});

Answer 2

我不确定所需的效果是什么，但请尝试以下代码，

DEMO ：http://jsfiddle.net/skram/8rB3S/2/

$(function() {
    $('#menu a').click(function(e) {
        e.preventDefault();
        var h = $(this).attr('href');
        $('#here').fadeOut(100, function () {
            $(this).html($(h).html())           
           .fadeIn('slow');
        });
    });
});

或

DEMO： http://jsfiddle.net/skram/8rB3S/1/（使用#here似乎就是您想要的地方）

$(function() {
    $('#menu a').click(function(e) {
        e.preventDefault();
        var h = $(this).attr('href');
        $('#aqui')
           .hide()
           .html($(h).html())           
           .fadeIn('slow');        
    });
});

Answer 3

在fadeout fadein函数中使用回调：

$(function() {
        $('#menu a').click(function(e) {
            e.preventDefault();
            var h = $(this).attr('href');
            $('#aqui').fadeOut('slow', function(){
                $(this).html($(h).html());
                $(this).fadeIn('slow');
            }):
        });
});

如何在fadeIn之前获得jQuery html（）加载完成？

3 个答案: