动画 Javascript 显示/隐藏按钮答案

【问题标题】：Animate Javascript show / hide button动画 Javascript 显示/隐藏按钮
【发布时间】：2014-09-02 07:41:35
【问题描述】：

我正在建立一个站点，并且在标题中有一个邮件图标。当您单击该图标时，会出现一个输入字段和提交按钮，以便人们可以注册新闻通讯。有没有办法使用宽度而不是使用 display:none 和 display:inline？因此，当您单击邮件图标时，输入字段会以动画方式从左侧滑出，而不是立即出现？

这是我正在使用的 javascript 代码...

  <!--Show & Hide Script Start-->
<script language="JavaScript">
function setVisibility(id1) {
if(document.getElementById('bt1').value=='H'){
document.getElementById('bt1').value = 'S';
document.getElementById(id1).style.display = 'none';

}else{
document.getElementById('bt1').value = 'H';
document.getElementById(id1).style.display = 'inline';

}
}
</script>
<!--Show & Hide Script End-->

【问题讨论】：

使用具有fadeIn() 和fadeOut() 函数的jQuery。
该代码是 oldschoooooool =D 读入一些现代 javascript。 language="Javascript" 看起来你的资料来自上个世纪。
我投票你也使用jQuery，让你的生活更轻松。

标签： javascript html css jquery-animate show-hide

【解决方案1】：

欢迎来到 jQuery 的精彩世界！

将此包含在您的<head></head>：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

将您的功能返工为：

function setVisibility(id1) {
  if($('#bt1').val() == 'H'){
    $('#bt1').val('S');
    $('#' + id1).fadeOut();
  }
  else{
    $('#bt1').val('H');
    $('#' + id1).fadeIn();
  }
}

如果你愿意，你甚至可以更进一步，在 jQuery 中设置你的点击事件......

$(function(){ //this part of the code wait until the DOM has loaded to execute
  $('[ID or Class selector for the button]').click(function(){
    setVisibility([string identifier for your element to hide/show]);
  });
});

【讨论】：