使用display：none属性为div设置FadeIn动画

Question

我在为我的一个div标签实现fadeIn函数时遇到问题，该标签上附有display：none属性。

将div标签显示然后淡入的最佳方法是什么？我非常坚持要保持显示：无属性。

这就是我的尝试：

<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

Try this solution if you want use 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);
}