Changing the visibility hidden and call fadeIn() when click event occured

I want to display an element(calling fadeIn function) when click event is occured. But, I want to do it on an element which is not visible at the first load. 开发者_StackOverflowWhen the user click on it, it will be displayed and will be there unless the page refreshes. Codes;

<input type="text" name="q" size="40" 
maxlength="255" class = "send"/>

<h6 style = "position:absolute;top:48px;left:43%;color:white;" class = "displayIt">DisplayMe</h6>

Jquery

<script type="text/javascript">
$(document).ready(function(){
  $(".send").bind("click",function(){
    $(".displayIt").css("visibility","visible").fadeIn(2000);
  });    
});
</script>

When i do this, fadeIn does not work because it makes the element(displayIt) visible suddenly:( How can i display it as implemented in fadeIn?

As fadeIn just plays with opacity of the element, making it visible will right away show it. So before you starts fading hide the element.

Working demo

$(document).ready(function(){
  $(".send").bind("click",function(){
    $(".displayIt").css("visibility","visible").hide().fadeIn(2000);
  });    
});