如何使用Javascript使某些内容缓慢显示在页面上？

Question

有没有更简单的方法可以使某些内容缓慢显示在网页上？ 我试图逐渐增加CSS的不透明度，但是每个浏览器的（不透明度）标记都不同。 是否每个人都使用众所周知的Javascript函数？ 还是有任何CSS标签？

[edit]感谢Jquery的建议。 还有其他选择吗？ 我的页面很小，不想添加Jquery。 （我知道Google托管它）

Answer 1

啊！ 这里的每个JS开发人员似乎都染上了jqueryitis！
如果您尚未受到感染或仍然想摆脱它，这是一个小功能，可以跨浏览器执行：)

function appear(elm, i, step, speed){
    var t_o;
    //initial opacity
    i = i || 0;
    //opacity increment
    step = step || 5;
    //time waited between two opacity increments in msec
    speed = speed || 50; 

    t_o = setInterval(function(){
        //get opacity in decimals
        var opacity = i / 100;
        //set the next opacity step
        i = i + step; 
        if(opacity > 1 || opacity < 0){
            clearInterval(t_o);
            //if 1-opaque or 0-transparent, stop
            return; 
        }
        //modern browsers
        elm.style.opacity = opacity;
        //older IE
        elm.style.filter = 'alpha(opacity=' + opacity*100 + ')';
    }, speed);
}

出现

appear(document.getElementsByTagName('DIV')[0], 0, 5, 40);

消失

appear(document.getElementsByTagName('DIV')[0], 100, -5, 40);

Answer 2

轻松使用Jquery：

$("#myElementID").fadeIn("slow");

Answer 3

亲爱的主！ 是的，我想我们大多数人都了解jQuery，谢谢。

今天，不透明度设置起来并不那么复杂。 现在只有IE需要特殊帮助。 请参阅此答案，以获取一些简单的，与时间无关的普通JavaScript衰减代码。

Answer 4

如果您可以使用jQuery，则animate()函数会帮助您。

$('your_selector').animate({opacity: 0.25}, 5000, function() {
    // Animation complete.
});

参见.animate（）

或者您可以使用fadeIn

$('your_selector').fadeIn('slow', function() {
        // Animation complete
      });

Answer 5

YUI还具有动画功能，仅允许您包含必需的模块，这将减少加载时间。

YUI动画

Answer 6

您fadein fadeout jQuery。 例如， jQuery('#ID').fadeout()将使以'ID'作为其ID的元素淡出（慢慢消失），

Answer 7

我建议使用jQuery。 您将必须使用fadeIn（）函数。 此处有详细说明： http : //api.jquery.com/fadeIn/ 。 从jQuery库开始后，我很少使用纯Javascript。

Answer 8

您也可以使用slideDown。

$("#YourID").slideDown("slow");