javascript - Fx on Javascript:如何在没有框架的情况下淡化东西？

我想学习如何淡入淡出，以及对Javascript的类似效果。
我经常得到答案，例如为什么不使用Jquery，mootools等？好吧，我
想了解东西是如何工作的，那么我不会介意使用任何这些框架。

我目前正在学习有关在DOM上进行更改的知识，因此，我读了很多
关于这个主题的东西。另外，我已经读到有关回流的信息，但是我没有发现任何很棒的方法
重绘上的内容，但我会继续搜索。

通过查看源文件等，我看到一些方法，我不知道它们是否
创建的还是JS的核心方法。

我的问题是，是否有任何资源可以让我学习所有这些精巧的东西，例如
平滑的位置变化，淡入淡出的低谷不透明度等等？

最佳答案

这是在Firefox和Chrome中工作的示例。即不尊重不透明风格。

    var ELEMENT;
    var STEPS;
    var INTERVAL;
    var COUNT;
    var TIMERID;

    // 5 * 200ms = 1 second
    STEPS = 5;
    INTERVAL = 200;

    function Button1_onclick() {

        ELEMENT = document.getElementById("foo");
        COUNT = STEPS - 1;
        TIMERID = setInterval(Fade, INTERVAL);
    }

    function Fade() {

        ELEMENT.style.opacity = String(COUNT / STEPS);
        COUNT--;

        if (COUNT < 0) {
            clearInterval(TIMERID);
            TIMERID = 0;
        }
    }

setInterval和clearInterval是标准的js函数。他们将每x毫秒执行给定的函数。在我们的案例中，我们在达到0不透明度时将其杀死。

滑动窗口是类似的过程。您将设置左/右/上/下样式，而不是不透明度。

关于javascript - Fx on Javascript:如何在没有框架的情况下淡化东西？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1725693/