动画Javascript显示/隐藏按钮

时间:2014-07-11 15:55:51

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

我正在建立一个网站,在标题中有一个邮件图标。当您单击图标时,会出现一个输入字段和提交按钮,以便人们可以注册简报。有没有办法使用宽度而不是使用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-->

1 个答案:

答案 0 :(得分:2)

欢迎来到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]);
  });
});