CODEWITHSUNDEEP
jquery
jerome
jerome

Reputation: 4977

jQuery fadeIn effect

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;
    });
});

Upvotes: 2

Views: 3927

Answers (2)

Wookai
Wookai

Reputation: 21723

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;
    });
});

Upvotes: 9

Jere.Jones
Jere.Jones

Reputation: 10123

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>

Upvotes: 5

Related Questions