javascript - 更改可见性隐藏并在发生点击事件时调用 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);
  });    
});