javascript - 在 Javascript 中淡出

Question

嘿，我是 javascript 的新手，我现在正在开发一个小型聊天程序。

我有所有的聊天记录(全局和私有(private)的等等..)但我想添加一个按钮，它可以使这些小“客户”的(大部分)元素淡出和淡入，这样你就没有一次查看所有这些，只是您想要的。

带有示例元素 mess1 的(相关)代码:

 h=0;
    newroom = function (roomname) {
        //create new container
        var div = document.createElement('div');
        div.className = 'container';
        //new text input
        var mess = document.createElement('input');
        mess.type = 'text';
        mess.id = 'mess1' + i;
        div.appendChild(mess);
        //minimizer button
        var min = document.createElement('input');
        min.type = 'button';
        min.value = 'Minimize chat';
        min.id = 'min' + i;
        div.appendChild(min);
        document.body.appendChild(div);
        document.getElementById("min" + h).addEventListener("click", function (){
        //this is where the magic happens
        }
        h++;
    };

我试过 document.getElementById("mess1"+ h).style.visibility = 'hidden';，但这只会让元素消失，留下一个丑陋的大空白。

我以为 document.getElementById("mess1"+ h).fadeOut('slow'); 会解决这个问题，但它什么也没做...

预先感谢您的回答

Answer 1

function fadeout(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}