CODEWITHSUNDEEP
javascriptjqueryhtmlcss
J. Doe
J. Doe

Reputation: 31

Fading out in Javascript

Hey I'm new to javascript and I'm working on a small chat program right now.

I've got all the chatlogs (global& private and stuff..) but i want to add a button which can make (most of) the elements of these little 'clients' fade out and in, so that you dont have to see ALL of them at one time, just the ones you want.

The (relevant) code with the example element 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++;
    };

I've tried document.getElementById("mess1" + h).style.visibility = 'hidden';, but that just makes the element disappear, leaving a big ugly blank space behind.

I thought document.getElementById("mess1" + h).fadeOut('slow'); would fix that, but it just doesn't do anything...

Thanks in advance for your answers

Upvotes: 2

Views: 80

Answers (3)

alexey
alexey

Reputation: 801

You can use 

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

it will hide element without empty space. But if you whant to hide element with animation you can use eq. this jquery:

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

or eq. 'fast' - as parameter

Upvotes: 0

Bishoy Bisahi
Bishoy Bisahi

Reputation: 377

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

Upvotes: 1

Metabolic
Metabolic

Reputation: 2904

first of all I will recommend to use jQuery, it will make your life much more easy. In jQuery, you can fade the element and then remove it like this

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

It will first fade the element and will then remove it from node if required

Upvotes: 0

Related Questions