Question

I dont knwo why the Jquery fade in is not working for my content div

HTML:

<div id="content">
        <div id="logo">
            <img src="images/blue.jpg" alt="logo" />
        </div>
        <div id="form">
            <form action="controler.php" method="post" id="target">
            <input id="pass" type="text" value="Password" name="pass" /></form>
        </div>
</div>

Javascript:

$(document).ready(function(){
    $("#content").fadeIn(2000);
    $('#pass').click(function() {
        this.value="";
        return false;
    });
});

It might be something small but I cant find it

Answer 1

If #content is initially visible, then fadeIn() has nothing to do because the object is already visible.

If you set the initial style to display: none, then fadeIn() can do it’s job.

To make it initially hidden, you can add this CSS:

#content {display: none;}

Or, you can add an inline style tag:

<div id="content" style="display: none;">