jQuery conceptual question - sliding in new content

I am new to jquery and AJAX. I am trying to get my concept down. I will simplify the question 开发者_如何学Pythonas much as possible.

I have a page with some #data pulled from a database, and a next button. When the next button is pressed, I want to refresh the #data with new random data from the database, and so-on. I want this new #data to slide in from the right. I do not want to refresh the whole page, I want the #data to refresh using AJAX.

I got most of this working except the sliding part. I'm not sure conceptually how to handle this. Many examples I've seen have static data on the page, and that data is hidden from view using CSS, and then jquery slides the panel into view using .animate.

In my case, the data isn't on the page, I am loading it with the load function.

My biggest question is where do I load the new data? I can't load it into the existing #data div, because then there would be no slider. Do I make an empty div as a placeholder for the load, then load the new data in there and slide it?

Any assistance would be helpful.

Thank you

Depends on what you mean by "slide in" but something like an accordion slider basically works by having a div you put the data into, and then animate. If you really want it to come in from another area of the page, you'll put it into a div and use the animation functions to move it.

Just a second, there are some examples of this in sample code, I'll find a link.

Okay, the docs for .animate() have several examples, so that's a place to start. Basically, you have a div and you use the .animate() method to periodically update the CSS -- which of course includes things like placement on the page.

Here's a nice photo slider which is similar in concept. Again, all you're really doing is changing the CSS, thereby causing the browser to render an element in a different place.

And there are a bunch of useful tutorials and examples here, here, here, and here.

If you want to stick with the examples you mention in your question then what you can do is in your success function insert the data into your html however you need it to be formatted. This could be in a div or table or whatever. Make this html "display: none" to start off with. That way it doesn't show up to the user right away but it still lives in the DOM. At this point you can think of the html as being in the same "state" your examples are in right before they call animate (think of it as static content at this point). So the only thing left to do would be to call animate.