Javascript 更改隐藏的可见性并在单击事件发生时调用fadeIn（）

我想在单击事件发生时显示一个元素（调用fadeIn函数）。但是，我想在第一次加载时不可见的元素上执行此操作。当用户单击它时，它将显示出来，除非页面刷新，否则它将在那里。代码

<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>

$（文档）.ready（函数（）{
$（“.send”）.bind（“单击”，函数（）{
$（“.displayIt”）.css（“可见性”、“可见”）.fadeIn（2000）；
});    
});

---

当我这样做时，fadeIn不起作用，因为它会使元素（displayIt）突然可见：（我如何显示fadeIn中实现的元素？

因为fadeIn只是处理元素的

不透明度，使其可见将立即显示它。因此，在开始淡入之前，隐藏元素

工作

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

由于fadeIn只是处理元素的
不透明度
，使其可见将立即显示出来。因此，在开始淡入淡出之前，请隐藏元素

工作

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

成功了，thx:）但我现在很困惑。你能解释一下为什么我们需要隐藏（）？据我所知，隐藏函数用于隐藏某些内容，而不是显示。例如，Show（）不起作用……当我们隐藏元素时，它将元素样式的
display
属性设置为
none
。
fadeIn
所做的是，它将元素样式的
opacity
从0更改为1，但在开始更改之前，它会显示元素。这起作用了，thx:）但我现在感到困惑。你能解释为什么我们需要hide（）？据我所知，隐藏函数用于隐藏某些内容，而不是显示。例如，Show（）不起作用……当我们隐藏元素时，它将元素样式的
display
属性设置为
none
。
fadeIn
所做的是，它将元素样式的
opacity
从0更改为1，但在开始更改之前，它会显示元素。