Jquery动画在加载回调时停止

Question

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

我有2个非嵌套div，我们称之为“text”和“content”。我想要： 用户点击：

1. 淡出“text”中的实际文字
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();
                    });

                }
            });
        });