jQuery fadeIn effect

Question

I am not sure why the following code is not behaving the way I would expect it to, but as I am new to jQuery I am sure that I'm missing something elementary.

html:

<div id="locale"></div>

<form id="theForm">
What would you like to do?<br /><br />
<input type="text" id="doThis" /><br /><br />
</form>

js:

$(document).ready(function() {
    $("#theForm").submit(function(){
     var doThis = $("#doThis").val().toLowerCase();
     $("#locale").html(doThis).fadeIn("slow");
     return false;
    });
});

Answer 1

I'll assume you have a submit button somewhere so that isn't your problem.

What I see on your code is that the locale div doesn't fade in. It looks like it just "pops" into existence. The problem is that the div is already visible. And the html call just replaces the internal html. fadeIn() won't do anything if the object is already visible.

Solution: Start the page with the div hidden.

Change this:

<div id="locale"></div>

To this:

<div id="local" style="display:none"></div>

Answer 2

You simply have to first hide the locale div so that it can actually fade in (otherwise it will be displayed directly) :

$(document).ready(function() {
    $("#theForm").submit(function(){
        var doThis = $("#doThis").val().toLowerCase();
        $("#locale").hide().html(doThis).fadeIn("slow");
        return false;
    });
});