jquery ajax results with div sliding down

Question

I have a page with a dropdown of all the users. when a person selects someone in the dropdown i fire off an ajax call to get user's information. that all works fine. I am trying to display the results of the ajax call in a div that slides down all pretty like.

i tried this:

 function getInfo(id)
{
        $.ajax({
                   type: "GET",
                   url: "users/userInfo.php",
                   data: "userId=" + id,
                   success: function(result){
                     $("#userData").html(result);
                   }
                 });
 $("#userData").hide();
 $("#userData").slideDown('slow');
 };

and on the first selection a person makes, it doesn't slide, it just appears. however if the person were to select a different option, the slide works perfectly. how can i get that first ajax response to slide?

i added the .hide() because i read that it has to be hidden in order to slide. I tried animate() and that was a disaster...

Answer 1

You need to rearrange your calls. move hide to before the ajax call. Then move slidedown to inside of the success callback:

function getInfo(id)
{
    $("#userData").hide();
    $.ajax({
            type: "GET",
            url: "users/userInfo.php",
            data: {userId: id},
            success: function(result){
                $("#userData")
                    .html(result)
                    .slideDown('slow');
        }
    });
 };

Answer 2

I tried the two functions hide and then slidedown in the ajax call on my homepage for navigation but were not successful. Here is my website, when you click on download you see that it works only the first time. When you click again, it will be hidden.

Here is my js, I hope you can give me a hint.

I enclose the js function that is called when clicking download:

function download( ) {

//$('#download').hide();

$.post(ajfile+'download', function(res) {

    $(".container").css("display","none");

    $('#download').html(res);
});

}

I enclose the php code to call the js with the links:

<div id="header" >  

    <ul id="navigation">

    <?php 
    # links
    foreach ($nav as $nav2) {

        echo '<li><a href="#'.lcfirst($nav2).'">'.$voc[$nav2].' ( ';

        # ü not possible as dec value
        if ($nav2== 'Aboutus')
            echo 'u';

        else
            echo lcfirst(substr( $voc[$nav2],0,1));

        echo ' ) </a></li>';

    } ?>

    </ul>   
    <input type=button onclick=download() value=Download(l)>
</div>  

Here is the tutorial I used which demonstrates how to create a website using keypress and links.

Basically I use a href attribute inside a a tag as navigation link. Moreover, I have a keypressed listener event. So everytime the link is clicked or a key pressed, the div with the id is called showing the content. The rest of the content is hidden with js css() method.