你如何使某些东西在使用Javascript的页面上慢慢出现？ [英] How do you make something to appear slowly on a page using Javascript?

问题描述

有更简单的方法让某些内容在网页上缓慢显示吗？我试图增量增加CSS的透明度，但它（不透明度）标签是不同的每个浏览器。有很好知道每个人使用的Javascript功能吗？或者有任何css标签吗？

Is there easier way to make something to appear slowly on webpage? I tried to incrementally increase opacity of the CSS, but it (opacity) tag is different for each browser. Is there well know Javascript function that everyone uses? Or is there any css tag?

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

[edit] Thanks for Jquery suggestion. Is there other option? My page is very small and don't want to add Jquery. (I know about Google hosting it)

推荐答案

Aargh！这里的每个JS开发者似乎都收缩了jquerytis！

如果你还没有被感染或仍然想逃离它，这里有一个小功能，做交叉浏览器的工作：）

Aargh! Every JS developer here seems to have contracted the jquerytis!
If you're not yet infected or still want to escape from it, here's a small function that do the job cross browser :)

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

这篇关于你如何使某些东西在使用Javascript的页面上慢慢出现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！