jquery - Jquery 动画在加载回调时停止

Question

我想做一些有点棘手的事情：

我有 2 个非嵌套 div，我们称它为“文本”和“内容”。我想：在用户点击时：

1. 淡出“文本”中的实际文本
2. 淡入加载文本并开始使用 .load 加载页面

在 .load 指令的末尾：

1. 淡出加载文本
2. 将内容 div 的 html 更改为加载的页面
3. slideDown 我刚刚加载的内容 div

这是我的代码：

$("#text").click(function () {
            console.log("click!");
            $('#content').fadeOut(400, function () {
                console.log("first Fade out complete!");
                $('#content').text('Loading..').fadeIn(400, function () {
                    console.log("first Fade in complete!");
                    $('#text').load('imageMenu.aspx', function () {
                        console.log("Load complete!");
                        $('#content').fadeOut(400, function () {
                            console.log("Second fadeout complete!");
                            $('#text').slideDown();
                        });
                    });
                });
            });

但它不起作用，在我的控制台中我有：

点击！

首先淡出完成！

首先淡入完成！

加载完成！

加载完成后，我加载的内容没有任何动画！我做错了什么？看起来加载回调没有被调用也没有被执行！

Answer 1

你会添加你的 HTML 代码来测试它吗？

你为什么不使用 $.ajax() 方法

类似的东西：

        $('#content').fadeOut(400, function() {
            $.ajax({
                url: 'imageMenu.aspx',
                success: function(result) {
                    console.log("Load complete!");
                    $('#content').fadeOut(400, function() {
                        console.log("Second fadeout complete!");
                        $('#text').slideDown();
                    });

                }
            });
        });