Question

嘿，我是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');可以解决这个问题，但它没有做任何事情......

提前感谢您的回答

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

Answer 2

首先我会建议使用jQuery，它会让你的生活更轻松。在jQuery中，你可以淡化元素，然后像这样删除它

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

它将首先淡化元素，然后在需要时将其从节点中删除

Answer 3

您可以使用

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

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

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

或eq。 'fast' - 作为参数

在Javascript淡出

3 个答案: