当点击事件发生时改变可见性隐藏并调用fadeIn()

Question

我想在点击事件发生时显示一个元素（调用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>

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

Answer 1

由于fadeIn 只是使用元素的opacity，使其可见将立即显示它。所以在你开始褪色之前隐藏元素。

工作demo

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