jQuery fadeIn() not working properly

Question

jquery:

 $.post("process_login.php",
  {username : $("#username").val(), password : $("#password").val()},
  function(data) {
   $("#login_results").fadeIn("slow").html(data);
   }
  )

html:

<table>
    <tr><td id="login_results"></td></tr>
    <tr><td><input type="text" id="username" /></td></tr>
    <tr><td><input type="password" id="password" /></td></tr>
    <tr><td><input type="submit" id="login_submit" /></td></tr>
</table>

The data shows, but it doesn't fade in. I have no idea why. =/. If you need any other details, let me know.

Answer 1

probably because you have them in reverse order. you want

$("#login_results").html(data).fadeIn("slow");

otherwise you're fading in something that doesn't have any content yet.

also, try putting what type of content is being returned by the post request.

$.post("page", {params}, function(data){}, "html");

after looking at the other answers, the more complete answer is to also make login_results invisible first:

<td id='login_results' style='display:none'></td>

Answer 2

Tables get really finicky when it comes to jquery effects. Inserting the content into a div should do the trick:

<table>
    <tr><td><div id="login_results" style="display:none"></div></td></tr>
    <tr><td><input type="text" id="username" /></td></tr>
    <tr><td><input type="password" id="password" /></td></tr>
    <tr><td><input type="submit" id="login_submit" /></td></tr>
</table>

Answer 3

first, make sure that your #login_results are not visible by applying a display: none on them (either in CSS page or inline, your choice). then try this:

$.post("process_login.php",
            {username : $("#username").val(), password : $("#password").val()},
            function(data) {
                    $("#login_results").html(data);
                    $("#login_results").fadeIn('slow');
                    }
            )

sometimes chaining doesn't work the way you'd think with certain combination of processes and effects...