gpt4 book ai didi

javascript - 动画 Javascript 显示/隐藏按钮

转载 作者:可可西里 更新时间:2023-11-01 13:33:09 25 4
gpt4 key购买 nike

我正在构建一个站点,在页眉中有一个邮件图标。当您单击该图标时,会出现一个输入字段和提交按钮,以便人们可以注册时事通讯。有没有办法使用宽度而不是使用 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]);
});
});

关于javascript - 动画 Javascript 显示/隐藏按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24701821/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com