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

【问题标题】：How do you make something to appear slowly on a page using Javascript?您如何使用 Javascript 使某些内容在页面上缓慢显示？
【发布时间】：2017-07-27 03:50:39
【问题描述】：

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

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

【问题讨论】：

看看 JQueryUI 库 - 它具有此功能...

标签： javascript html css

【解决方案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);

【讨论】：

style['-moz-opacity'] 不起作用。作为 JS 属性名称，连字符被转换为大写字母：style.MozOpacity。然而，-moz-opacity 自 Firefox 0.9 起就不再需要了……你今天当然可以放弃它，因为除了 IE 之外的所有浏览器都支持纯 CSS3 语法。
@Mic 你的函数看起来很小而且写得很好，但最好还包括一些 cmets 来解释正在发生的事情并帮助初学者或困惑的编码人员（比如我 =]）。谢谢
@slevin，现在与 cmets 合作！

【解决方案2】：

使用 Jquery 很容易：

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

【讨论】：

【解决方案3】：

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

在今天，不透明度的设置并不那么复杂；现在只有 IE 需要特殊帮助。请参阅this answer 了解一些简单的纯 JavaScript 时间无关的淡入淡出代码。

【讨论】：

【解决方案4】：

如果你会使用 jQuery，那么animate() 函数会帮助你。

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

见.animate()

或者你可以使用fadeIn

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

【讨论】：

【解决方案5】：

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

YUI Animation

【讨论】：

【解决方案6】：

你是 jQuery 的 fadein 和 fadeout。比如jQuery('#ID').fadeout()会让一个id为'ID'的元素淡出（慢慢消失），

【讨论】：

【解决方案7】：

我推荐使用 jQuery。您将不得不使用 fadeIn() 函数。详细解释在这里：http://api.jquery.com/fadeIn/。在开始使用 jQuery 库后，我很少使用纯 Javascript。

【讨论】：

【解决方案8】：

您也可以使用 slideDown。

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

【讨论】：