Question

是否有更简单的方法让某些内容在网页上慢慢显示？我试图逐步增加CSS的不透明度，但它（不透明度）标签对于每个浏览器是不同的。是否熟悉每个人都使用的Javascript功能？或者有没有css标签？

[编辑]感谢Jquery的建议。还有其他选择吗？我的页面非常小，不想添加Jquery。（我知道谷歌托管它）

Answer 1

AARGH！这里的每个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需要特殊帮助。有关一些简单的与时间无关的简单淡入淡出代码，请参阅this answer。

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 Animation

Answer 6

jQuery的fadein和fadeout。例如，jQuery('#ID').fadeout()会将带有“ID”的元素作为其淡出的ID（慢慢消失），

Answer 7

我建议使用jQuery。您必须使用fadeIn（）函数。详细解释如下：http://api.jquery.com/fadeIn/。在开始使用jQuery库之后，我很少使用纯Javascript。

Answer 8

您也可以使用slideDown。

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

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

8 个答案: