动画Javascript显示/隐藏按钮

Animate Javascript show / hide button

本文关键字：隐藏 按钮 显示 Javascript 动画      更新时间：2023-09-26

我正在建立一个网站，在头部有一个邮件图标。当你点击图标时，会出现一个输入框和提交按钮，这样人们就可以注册时事通讯了。是否有一种方法来使用宽度而不是使用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-->

欢迎来到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]);
  });
});
相关文章：