没有使用工具包的情况下，具有幻灯片效果的Ajax

Question

I'm really not that good at Javascript and that, so I need another bit of help. I want to be able to do a quick bit of AJAX using PHP then when the ajax response is finished show the response in a div and SLIDE it down nicely.

The basic AJAX side of it is no problem. But I want to be able to have it slide nicely without using any framework like jQuery or MooTools. Mainly for learning, but there are other reasons. So, any help on a very simple way od doing so would be handy. I can't really find much online. If I have to use jQuery then I guess I can, I have played about with it but I'm not a fan of Javascript at the best of times...

So yeah, pretty much any advice/tips/thoughts/help would be really handy!

Answer 1

I guess the basics would be something of a timeOut() in combination with increasing the height until it is full height:

1. set the display of the element to none
2. get the full height of the element, something like:
   document.getelementById('IDofElement').style.height
3. set the height to 0 and the display to something like block
4. set a timeOut() and increase the height in the called function, activate a new timeOut() if the element is not already full height.

The only real disadvantage of not using a library would be that you would have to test in a lot of different browsers and perhaps make modifications according to the browser used. Libraries have already solved that problem for you.