Here is my setup:
<div id="user_input">...</div>
And a button:
<input type="button" id="panel_button">...</button>
Using a selector:
function $(id) {
return document.querySelector(id);
}
With an event handler:
var button_panel = $('#panel_button');
button_panel.addEventListener('click', fadeUserInputPanel, false);
Additionally, I have implemented 3 functions for fading the input panel in and out:
var user_input_panel = $('#user_input');
user_input_panel.style.opacity = 1;
function fadeUserInputPanel()
{
if(user_input_panel.style.opacity == 1)
{
fade_out();
}
else if(user_input_panel.style.opacity == 0)
{
fade_in();
}
}
function fade_out()
{
if(user_input_panel.style.opacity > 0)
{
user_input_panel.style.opacity -= 0.1;
setTimeout(fade_out, 50);
}
}
function fade_in()
{
if(user_input_panel.style.opacity < 1)
{
user_input_panel.style.opacity += 0.1;
setTimeout(fade_in, 50);
}
}
However, there seems to be an issue:
Upon loading the page, the input panel is visible due to its opacity value of 1.
When clicking the panel_button, the input panel begins to fade out smoothly until it disappears.
But upon clicking the panel_button again to make the panel fade in, it only reaches an opacity of 0.1 and doesn't progress further.
Although the 'fade_in()' function should continue fading the panel in when the opacity is less than 1, it seems to be failing in this scenario. What could be causing this issue?