Jquery和AJAX。在动画之间放置Ajax调用

首先让我告诉你，我是一个人学习脚本的，所以我的方法肯定有点奇怪。 要解释我想做什么，请访问我准备的示例站点：

您会注意到，当您按下“Showroom”和所有其他菜单按钮后出现的所有链接时，主框的内容会在窗口向下移动之前发生变化

简单地说：我想要完成的是，窗口向下移动，保持内容不变，直到它消失，然后当它从右侧出现时，它应该有新的内容

当前窗口内容：“主页” ->推送“个人” ->窗口内容仍然是“主页”的内容 ->下移 ->来自右侧，内容来自“个人”

下面是AJAX和动画的Javascript部分

 function createRequestObject()
 {
    var ro;
    var browser = navigator.appName;
     if(browser == "Microsoft Internet Explorer")
    {
    ro = new ActiveXObject("Microsoft.XMLHTTP");
 }
    else
    {
    ro = new XMLHttpRequest();
 }
 return ro;

 }

 var http = createRequestObject();

 var katcheck;

 function sndReq(req)
 {

    var req2 = req;

    katcheck = req.slice(0, 1);

    if (katcheck == "k")
    {
    var katid = req2.slice(3,4);

    http.open('get', 'getkat.php?kat='+katid);
    }
    else
    {
    $('#videoleft').animate({"top": "1000px"}, { queue:true, duration:600,  easing: 'easeInQuad'})
              .hide(0).animate({"top": "0px", "left": "800px"},{ queue:true, duration:1});

        http.open('get', 'getwork.php?id='+req);
    }
http.onreadystatechange = handleResponse;
http.send(null);
}


function handleResponse()
{
    if(http.readyState == 4)
                    {
                   var response = http.responseText;
                    }

    if (katcheck == "k")
    {
                document.getElementById("videomenue").innerHTML = response;
    }
    else
    {
        $('#videoleft').show(0).animate({"top": "0px", "left":"0px"},{ queue:true, duration:800,  easing: 'easeOutBack'});

        document.getElementById("post").innerHTML = response;

    }
 }

好的，现在我将解释sndReq函数开头的部分：

通常，菜单中的按钮只向sndReq发送数字（DB中的ID）。例如：按“Showroom”键，然后“k_01”将被发送到同一sndReq功能。“k”代表category，脚本通过切片字符串来判断它是否是category请求

我希望你明白我的意思

如果能够真正使用windows，一个旧内容向下移动，另一个新内容从右侧出现，这将是一件非常棒的事情，但是当我试图用两个窗口（如test3.php（同一目录））来攻击它时，我遇到了一个未定义的问题

---

我希望有人能帮助我。非常感谢

动画函数是异步的，这意味着您调用它，并且在动画发生时代码继续执行

所以问题#1
在动画上链接隐藏命令，该命令在动画开始的同时将其隐藏（这就是为什么框会闪烁。动画会重新显示框并继续动画..）

修复
animate函数还接受在动画结束时执行的回调函数作为参数

在这里，您应该调用ajax代码，以便在框离开屏幕后执行

我相信对sndReq函数的以下更改会起到作用

function sndReq(req)
 {

    var req2 = req;

    katcheck = req.slice(0, 1);

    if (katcheck == "k")
    {
    var katid = req2.slice(3,4);

    http.open('get', 'getkat.php?kat='+katid);
    http.send(null);
    http.onreadystatechange = handleResponse;
    }
    else
    {
    $('#videoleft')
         .animate(  {"top": "1000px"}, 
                    600, 'easeInQuad',
                    function(){
                                console.log('fetching remote data');
                                var param = req;
                                http.open('get', 'getwork.php?id='+param);
                                http.send(null);
                                http.onreadystatechange = handleResponse;
                              } // this is the callback function 
                 )
         .animate(
                    {"top": "0px", "left": "800px"},
                    1, 
                    function(){$(this).hide();}
                 );

    }
}

更新 此外，在

handleResponse

中，应在启动动画之前将innerHtml设置为响应

在html的末尾还有一个双脚本。。查看并删除重复的结束标记

QueryLoader.init();
</script>

---

非常感谢你！我根据你做了更改，现在它工作了！您可以在同一目录下的test2.php文件中看到它。还有一件事：有时按下其中一个按钮时会出现延迟，这意味着动画不会在同一时刻启动，而是需要很短的时间（最多2秒）。我相信这与jquery动画的结尾有关，但我不确定。有什么想法吗？再次：非常感谢！加比，非常感谢你的帮助，你为我节省了很多时间和压力！太快了！这真是一个伟大的网站！

function handleResponse()
{
    if(http.readyState == 4)
         {
          var response = http.responseText;

          if (katcheck == "k")
               {
                document.getElementById("videomenue").innerHTML = response;
               }
          else
               {
                $('#videoleft')
                         .show(0).
                         .animate(
                                  {"top": "0px", "left":"0px"},
                                  { queue:true, duration:800,  easing: 'easeOutBack'}
                                 );
          document.getElementById("post").innerHTML = response;

               }
         }
 }