具有display：none屬性的div的FadeIn動畫

Question

我在為我的其中一個具有display：none屬性的div標簽實現淡入功能時遇到問題。

使div標簽出現然后淡入淡出的最佳方法是什么？ 我非常堅持保留display：none屬性。

這是我嘗試過的：

<div class="graphs_line_based clearfix" style="display:none" id = "test_id">

然后在我的.script文件中：

document.getElementById('test_id').fadeIn(1000);

它只是不播放動畫。 任何幫助/建議，將不勝感激！

Answer 1

如果您嘗試使用jQuery函數.fadeIn ，則必須像這樣調用DOM對象：

$('#test_id').fadeIn(1000);

Answer 2

我想你的意思是說：

$("#test_id").fadeIn(1000);

Answer 3

如果您想使用javascript，請嘗試此解決方案

<div class="graphs_line_based clearfix" style="display:block" id = "test_id">aiuto</div>

fade(document.getElementById('test_id'));

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