在Javascript中淡出

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

我有所有的聊天日志（全球和私人的等等），但我想添加一个按钮，可以使这些小“客户”的元素（大部分）淡入淡出，这样你就不必一次看到所有这些，只看到你想要的

带有示例元素的（相关）代码

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”）
可以解决这个问题，但它什么也做不了

提前感谢您的回答
首先，我建议您使用jQuery，它将使您的生活更加轻松。在jQuery中，您可以淡入元素，然后像这样删除它

 $("#mess1" + h).fadeOut('slow',function(){
     $("#mess1" + h).remove();
});

它将首先淡入元素，然后根据需要将其从节点中删除
功能淡出（元素）{
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);
}

var op=1；//初始不透明度
变量计时器=设置间隔（函数（）{
如果（op您可以使用

document.getElementById("mess1" + h).style.display= 'none';

它将隐藏没有空格的元素。但是如果你不想用动画隐藏元素，你可以使用eq。这个jquery：

$("#mess1" + h).hide('slow') 

或者，作为参数，您需要使用jQuery，比如
$（“#mess1”+h）.fadeOut（'slow'）
@jcubic$（“#mess1”+h）.fadeOut（'slow'））它可以做一些事情。看看控制台，你应该看到一个错误消息。我实际上考虑使用jQuery，但我不知道如何。感谢启发：DJAL文件导入jQuery，然后使用它，在几天内你会意识到不同：但是，你应该考虑使用另一个动画框架（例如）。请添加否决投票的理由