0

所以这是我的代码

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #box {
        width: 300px;
        height: 300px;
        background-color: blue;
    }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="main.js"></script>
</html>

javascript

var box = document.getElementById('box');

function changeColor() {
    box.style.width = "600px";
    box.style.height = "600px";
    box.style.background = "red";
}

box.onclick = setInterval(changeColor, 5000);

如您所见，它在一瞬间发生了变化。我有盒子改变大小和颜色，但我希望它逐渐做到这一点。我知道它在 Jquery 中很容易，但我正在努力提高我在 Javascript 中的技能，任何建议都会有所帮助，谢谢大家。

4

1 回答 1

2

javascript动画背后的基本前提是递归。动画元素需要有“帧”，单帧需要超时，直到它进入下一个序列，这就是为什么递归是有益的。

注意：这个函数不会停止 div 的动画，你需要输入条件代码来停止 setTimeout() 的设置。

function moveEl(el)
{
    var left = parseInt(el.style.left) || 0;

    el.style.position = 'relative';
    el.style.left = (left + 1) + 'px';

    // Recursive timeout to move the element left 1px every 20ms
    setTimeout(function(){
        moveEl(el);
    }, 20);
}

var el = document.getElementById('box');

// Start the animation
moveEl(el);

jsFiddle 示例

这应该可以帮助您编写一些自定义动画代码，尽管我会将其视为学习练习。jQuery 的动画技术非常强大，跨浏览器兼容，并且比我拼凑起来实现相同效果的任何自定义代码更有用。

颜色之间的动画：

在颜色之间平滑动画有点棘手，如果使用上述技术，需要在两种颜色之间加载十六进制颜色代码才能从一种颜色平滑过渡到另一种颜色。幸运的是，在现代浏览器中，您可以将一个元素的不透明度动画化为零，而下方元素的纯色看起来好像一个元素已动画化。再次，jQuery 有多种方式来支持 IE7 和 IE8 等及其fadeIn()功能fadeOut()。

于 2013-04-02T16:01:42.500 回答