1

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

我目前正在学习如何对 DOM 进行更改，因此，我已经阅读了很多关于这个主题的内容。另外，我读过关于 Reflow 的文章，但是，我没有在 Repaint 上找到任何很酷的东西，但是，我会继续寻找。

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

我的问题是，有没有什么资源可以让我学习所有这些简洁的东西，比如平滑的位置变化、通过不透明度淡化元素等等？

4

3 回答 3

2

看看emile.js。这是全新的品牌。学习如何做自己的好方法。

在最近的 jsconf 会议上介绍。由 Thomas Fuchs (script.aculo.us) 撰写。

http://github.com/madrobby/emile

Émile 独立的 CSS 动画

JavaScript 迷你框架

不需要 JavaScript 框架

动画的全套 CSS 属性（基于长度和颜色）

缓动和回调

少于 50 行代码

在 Twitter 上获取更新：http: //twitter.com/emilejs

于 2009-11-12T22:46:05.603 回答
1

这是一个适用于 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 时将其杀死。

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

于 2009-11-12T22:36:34.437 回答
0

使用 javascript 的淡入淡出基本上是以编程方式修改元素的不透明度。“平滑度”是通过使用计时器来完成的。位置/大小更改相同。您需要阅读 css 以了解您必须使用 javascript 控制元素的哪些样式属性以获得所需的效果。

如果你真的很好奇，可以深入github中yui的源码：http: //github.com/yui

于 2009-11-12T22:06:11.080 回答