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

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