Question

首先让我告诉你，我自己学习了脚本，所以我的方法确实有点奇怪。要解释我想要做什么，请转到我准备的示例网站：How it should be, kind of!

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

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

当前窗口内容：“home” - ＆GT;推“个人” - ＆GT;窗口内容仍然是“家”的内容 - ＆GT;向下移动 - ＆GT;来自右侧的“个人”内容

这是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函数开头的部分：

通常，menue中的按钮只是将数字（数据库中的ID）发送到sndReq。例如：按“Showroom”，然后将“k_01”发送到相同的sndReq函数。 “k”代表类别，脚本通过切片字符串来判断它是否是类别请求。

我希望你理解我的意思。

实际上对于Windows来说真是太棒了，其中一个旧内容向下移动，同时一个新窗口来自右侧，带有新内容但是当我尝试用两个窗口来测试它时就像在test3中一样.php（同一目录）我得到了未定义的问题。

我希望有人可以帮助我。非常感谢你

Answer 1

animate函数是异步的，这意味着你调用它，你的代码会在我发生动画时继续执行..

问题＃1
你将动画上的hide命令链接在动画开始的同时隐藏它（这就是为什么有一个框的闪光。动画重新显示框并继续动画..）

<强>修正
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>

更新2
您在评论中描述的问题是因为多次调用handleResponse函数。这是正常的，因为每次更改ajax调用都会发生readystatechange事件。您只需在http完成时执行操作（ readystate == 4 ），而不是任何改变..

所以你的代码应该在初始的if语句中，以避免多次执行..

将其更改为

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;

               }
         }
 }

Jquery和AJAX。在动画之间进行Ajax调用

1 个答案: