Question

我有一个输入面板：

<div id="user_input">...</div>

我有一个按钮：

<input type="button" id="panel_button">...</button>

我有一个选择器：

function $(id) {
    return document.querySelector(id);
}

我有一个事件处理程序：

var button_panel = $('#panel_button');
button_panel.addEventListener('click', fadeUserInputPanel, false);

最后我有3个函数用于淡入和淡出输入面板：

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);
    }
}

问题如下：

当我加载页面时，可以看到输入面板 - 因为它的不透明度值为1.

然后我点击 panel_button ，开始使输入面板淡出。它的效果非常好，所以不透明度直接变为0，面板慢慢消失。

但当我再次点击 panel_button 时，它开始使输入面板淡入，但是当输入面板的不透明度为0.1时它会停止，它会不要再进一步了。

但是根据'fade_in（）'函数 - 如果不透明度小于1 - 它应该继续淡入面板。为什么它不起作用？

Answer 1

这是因为style.opacity不是数字，而是字符串。

> document.body.style.opacity = 0
0
> document.body.style.opacity 
"0"
> document.body.style.opacity += 0.1 
"00.1"
> document.body.style.opacity += 0.1 
"0.10.1"
> document.body.style.opacity += 0.1 
"0.10.1"

fade_out()的减法运行正常，但这只是因为-=运算符没有连接语义，并且总是将参数强制为数字。

要修复，请手动将不透明度强制转换为数字：

function fade_in() {
    var opacity = +user_input_panel.style.opacity;
    if (opacity < 1) {
        user_input_panel.style.opacity = opacity + 0.1;
        setTimeout(fade_in, 50);
    }
}

Answer 2

你可以简单地在不透明度上解析浮动，它应该被修复。

function fade_in() 
{
    if(user_input_panel.style.opacity < 1) 
    {
        user_input_panel.style.opacity = parseFloat(user_input_panel.style.opacity) + 0.1;
        console.log(user_input_panel.style.opacity);
        setTimeout(fade_in, 50);
    }
}

以下是一个工作示例：https://jsfiddle.net/bryanray/1c9oo5k5/

JavaScript if语句在应该返回时不返回true

2 个答案: