总结：问题的总结是，我想找出与我们在jQuery中执行的简单代码相对应的复杂代码。我所指的代码与jQuery使用的淡入和淡出动画方法有关。我想使用纯JavaScript代码而不是jQuery。
这是在jQuery中使用的代码，我想要一个等效的纯JavaScript代码。
下面的代码对你来说就很清楚了，但是不好意思，我想指出不止一点，
- 第一点：即只有一个按钮来执行该功能（即，两种情况的淡入淡出方法）。
- 第二点：div是一个容器标签，它有一个class =“msg”，但里面没有文本（即在HTML中）和函数一开始就执行的文本（即，在JavaScript中）。
<body>
<form autocomplete="off">
<input type="text" name="username" id="username" placeholder="Enter Username">
<button type="button" id="btn">OK</button>
</form>
<div class="msg"></div>
<script>
$(document).ready(function (){
$('#btn').click(function (){
let usName = $('#username').val();
if(usName != ''){
$('.msg').html('Welcome ' + usName);
$('.msg').fadeIn(1500);
}else{
$('.msg').html('Username is required');
$('.msg').fadeIn(1000).delay(1000).fadeOut(1000);
}
});
});
</script>
</body>我尝试做的是非常简单的代码，没有任何动态动画方法，但是代码也执行得很好。
<body>
<form autocomplete="off">
<input type="text" name="username" id="username" placeholder="Enter Username">
<button type="button" id="btn" onclick="show()">OK</button>
</form>
<div class="msg"></div>
<script>
function show()
{ let usName = document.getElementById("username").value;
if (usName != "")
{
document.getElementsByClassName("msg")[0].innerHTML = "Welcome" +" "+ usName;
}
else
{
document.getElementsByClassName("msg")[0].innerHTML = "Username is required";
}
}
</script>
</body>
2条答案
按热度按时间flseospp1#
jQuery网站：
fadeIn（）方法对匹配元素的不透明度进行动画处理。
所以写一个不透明度为0的css类和一个过渡。
现在，使用简单的JavaScript将类应用于要淡出的元素，并从要淡入的元素中删除该类。
如果你不想让它影响你的布局。您可以在淡入淡出完成后立即将其设置为
display:none。lo8azlld2#
你可以试试这个：
可以使用toggle动态添加或移除类名