risposta Ajax che scorre aperto un div

Question

Va bene, questo è seguito della mia domanda precedente reguarding l'esecuzione di una semplice richiesta Ajax che, una volta che la richiesta è restituito un readyState di 4 e uno status di 200 inserisce la risposta in un div e scivola verso il basso piacevolmente. Non voglio che venga effettuata utilizzando un kit di strumenti come jQuery o scriptalicious.

qui è la domanda iniziale:
Ajax con effetti di scorrimento onReady witout utilizzando un toolkit

Finora sono riuscito a ottenere tutto lavorando molto bene. Tuttavia ho il problema che, il testo restituito viene mostrato e quindi il div si espande. Ho bisogno di lavorare con il div e il testo in espansione insieme.

Ecco il mio codice

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

I pensare questo sta accadendo a causa utilizzando il seguente di mettere la richiesta GET tornato nella div.

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

Qualcuno può per favore mi ha messo nella direzione giusta con questo? Non sto particularty bene con JavaScript e probabilmente sto andando nella direzione sbagliata completo su di esso in modo che qualsiasi puntatori sarebbe grande! Grazie in anticipo!

Answer 1

E 'difficile da dire senza vederlo in azione, ma prova ad aggiungere questo:

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