在Javascript中淡出

嘿，我是JavaScript新手，我正在開發一個小型聊天程序。在Javascript中淡出

我已經得到了所有chatlogs（全球&私人和東西..）但我想添加一個按鈕，可以使（大部分）這些小客戶端的元素淡出和進入，讓你沒有必要一次看到他們所有的，只是你想要的。

的（相關）代碼的例子元素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');會解決這個問題，但它只是沒有做任何事情...提前

謝謝您的回答

來源

2016-02-11 J. Doe

您需要像'$（「＃mess1」+ h）.fadeOut（'slow'）' – jcubic

@jcubic $（「＃mess1」+ h）.fadeOut（'slow '） –

它確實做了些什麼。看看控制檯，你會看到一條錯誤消息。 –

首先我會建議使用jQuery的，它會使你的生活更容易。在jQuery中，你可以淡化的元素，然後將其刪除這樣

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

它首先會褪色的元素，如果需要的話

來源

2016-02-11 11:09:06

我其實想過使用jquery，但我不知道如何。感謝您的啓發：D –

只是導入jQuery文件到頁面，然後使用它，在幾天內你會意識到不同:) –

但是你應該考慮使用另一個框架的動畫（例如http://greensock.com/或http://julian.com/research/velocity/） –

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

來源

2016-02-11 11:09:40

然後將從節點中刪除，您可以使用

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

它會隱藏沒有空白空間的元素。但是如果你想用動畫隱藏元素，你可以使用eq。此jquery：

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

或eq。 'fast' - 作爲參數

來源

2016-02-11 11:10:33 alexey

在Javascript中淡出

回答

相關問題