隐藏可见性并在发生单击事件时调用fadeIn（） [英] Changing the visibility hidden and call fadeIn() when click event occured

问题描述

我想在发生点击事件时显示一个元素（调用fadeIn函数）。但是，我想要在第一次加载时看不到的元素上执行此操作。当用户点击它时，它将被显示并且将在那里，除非页面刷新。代码;

 < input type =textname =qsize =40
 maxlength = 255class =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中显示它？

解决方案

正在工作 http://jsfiddle.net/wbeNb/rel =nofollow> demo

  （）。$（document）.ready（function（）{
 $（。send）。bind（click，function（）{
 $（。displayIt）。css（visibility ，visible）。hide（）。fadeIn（2000）; 
}）; 
}）; 
  

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

这篇关于隐藏可见性并在发生单击事件时调用fadeIn（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！