Summary : The summary of the problem is that I want to find out the complicated code corresponding to this easy code that we are executing in jQuery. The code that I am referring to is that related to Fade-in and Fade-out animation methods used by jQuery. I want to use pure javaScript code instead of jQuery .
This is the code used in jQuery and I want an equivalent pure javaScript code for it.
The following code will be clear to you, but excuse me, I want to point out more than one point,
*First point : which is that there is only one button to execute the function (i.e. Fade methods "in or out" for both conditions) .
*Second point : div is a container tag which has a class ="msg" but it has no text inside (i.e. in html ) and the text executed as soon as the function begins (i.e. in 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>
what i have tried to do was very simple code which has not any dynamic animation methods, however that code has been executed well also.
<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>
From jQuery website:
So write a css class with 0 opacity and a transition.
Now use simple JavaScript to apply the class to the element that you want to fade out and remove the class from the element you want to fade in.
And if you want it to not affect your layout. You can set it to
display:noneimmediately after the fade is complete.