How do I slide(scroll) an entire div thats been retrieved through jquery's .load()?

So I have I this javascript that loads into a div the contents of my php (which gets data from a mysql database). When a different button is clicked, it calls the eat.php file again, with the new data to retrieve from MySQL and again loads the new data into the div.

<script type="text/javascript">
$(function() {
    $("a[name=eat]").click(function() {
开发者_如何学C        $("div.nav a[name=eat]").css({"background-color":"#666966","color":"#fff"});
        $(".user-main").load("eat.php");
    });
    $("a[name=analyze]").click(function() {
        $(".user-main").load("eat.php",{ name: "John", time: "2pm" });
    });
});
</script>

And that is ok and everything. My question is how can I make this "slide" into the new div, like it's being scrolled horizontally? I am having no luck with the animate feature in jQuery, and would prefer not to use any frameworks. Also, is the correct way to check for a jQuery post by doing:

if (isset($_POST['name']))

in my eat.php file?

I am not quite sure what you are asking. If you want to ensure the data you have just added is scrolled into view, then you can use code like this

if (document.all) {
document.body.scrollIntoView(false);
} else {
    document.body.insertAdjacentHTML('beforeEnd','<a name="' + a + '"><\/a>');
window.location.hash = '#'+a;
}

The trick with insertAdjacentHTML is inserting a label into the screen and then telling the browser to jump to it. The label is the contents of a javascript variable which must be different each time the code is run.

If you wish to slide a whole division into view, then you will have to use a timer. Set up the div so the over-flow is hidden and it is positioned off screen, using position relative and large top or left/right values. Then, each time the timer goes off, decrease the offset towards zero.

If the timer goes off every 50ms and you move only a few pixels, you will get 20fps and it will appear quite smooth.