滑动的Ajax响应打开div [英] Ajax response that slides open a div

问题描述

好吧，这是继我之前的问题之后，再次执行一个简单的ajax请求，一旦请求返回了readyState为4且状态为200的请求，它将响应插入div并很好地向下滑动。我不希望使用jQuery或scriptalicious之类的工具包来执行该操作。

Okay, this is following on from my previous question reguarding performing a simple ajax request that, once the request has returned a readyState of 4 and a status of 200 it inserts the response into a div and slides it down nicely. I don't want it to be performed using a toolkit such as jQuery or scriptalicious.

这是原始问题：

here is the original question:
Ajax with slide effects onready witout using a toolkit

到目前为止，我已经设法使其全部正常运行。但是我有一个问题，显示返回的文本，然后div扩展。我需要它与div和文本一起扩展。

So far I have managed to get it all working quite nicely. However I have the problem that, the text returned is shown and then the div expands. I need it to work with the div and text expanding together.

这是我的代码

function slideDown()
{
    document.getElementById('slideDiv').style.visibility = 'hidden';
    xmlhttp.open("GET", "parse.php?what=main", true);
    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            document.getElementById('butt').value = 'hide';
            document.getElementById('slideDiv').innerHTML = xmlhttp.responseText;
            document.getElementById('slideDiv').style.display = 'block';
            var fHeight = document.getElementById('slideDiv').offsetHeight;
            document.getElementById('slideDiv').style.height = '0';
            document.getElementById('slideDiv').style.visibility = 'hidden';
            function timeIt()
            {
                function bar()
                {
                    timeSlide(fHeight);
                }
                setTimeout(bar, 10);
            }
            timeIt();
        }
    }
    xmlhttp.send(null); 
}

function timeSlide(fHeight)
{
    var fHeight;
    var diff;
    document.getElementById('slideDiv').style.visibility = 'visible';
    var cHeight = document.getElementById('slideDiv').clientHeight;
    if (cHeight < fHeight)
    {
        cHeight = cHeight + 3;
        document.getElementById('slideDiv').style.height = cHeight+'px';
        function timeIt()
        {
            function bar()
            {
                timeSlide(fHeight);
            }   
            setTimeout(bar, 10);
        }
        timeIt();
    }
    else
    {
        endSlide();
    }
}

我认为是由于使用以下命令

document.getElementById('slideDiv').innerHTML = xmlhttp.responseText;

有人可以请我朝正确的方向吗？我对JavaScript并不是特别擅长，我可能会采用完全错误的方式，因此任何指针都很棒！

Can someone please put me in the correct direction with this? I'm not particularty good with JavaScript and I'm probably going the complete wrong way about it so any pointers would be great! Thanks in advance!

推荐答案

如果看不到它，很难说，但是尝试添加一下：

It's hard to say without seeing it in action but try adding this:

document.getElementById('slideDiv').style.overflow = 'hidden';

这篇关于滑动的Ajax响应打开div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！