Question

好的，这是继我之前提出的一个简单的ajax请求的问题之后，一旦请求返回了readyState为4且状态为200，它就会将响应插入到div中并很好地滑动它。我不希望它使用诸如jQuery或scriptalicious之类的工具包来执行。

这是原始问题：
Ajax with slide effects onready witout using a toolkit

到目前为止，我已经成功地完成了所有工作。但是我有一个问题，显示返回的文本，然后div扩展。我需要它来处理div和文本一起扩展。

这是我的代码

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();
    }
}

我认为这是因为使用以下命令将返回的get请求放入div中。

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

有人可以请我把它指向正确的方向吗？我对JavaScript并不是特别好，而且我可能会采用完全错误的方式，所以任何指针都会很棒！提前谢谢！

Answer 1

很难说没有看到它在行动但是尝试添加这个：

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

滑动打开div的Ajax响应

1 个答案: