CODEWITHSUNDEEP
javascriptjquery
Andrew
Andrew

Reputation: 12432

jQuery fadeIn() not working properly

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.

Upvotes: 0

Views: 3597

Answers (3)

helloandre
helloandre

Reputation: 10721

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>

Upvotes: 1

Ariel
Ariel

Reputation: 4500

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>

Upvotes: 1

Jason
Jason

Reputation: 52523

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...

Upvotes: 1

Related Questions