Question

所以这是我的代码

<!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技能，任何建议都会有所帮助，谢谢你们和gals。

Answer 1

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 Example

这会让你开始编写一些自定义动画代码，不过我会把它当作一个学习练习。 jQuery的动画技术非常强大，跨浏览器兼容，并且比我为了达到相同效果而拼凑的任何自定义代码都非常有用。

颜色之间的动画：

如果使用上述技术，要在颜色之间平滑地制作动画，如果使用上述技术，则需要在两种颜色之间加载十六进制颜色代码，以便平滑地从一种颜色过渡到另一种颜色。幸运的是，在现代浏览器中，您可以将一个元素的不透明度设置为零，同时将下方元素的纯色显示为一个元素具有动画效果。 jQuery还有很多方法可以通过fadeIn()和fadeOut()函数来支持IE7和IE8等。

尝试使用基本的Javascript为div设置动画并使其更大但让它平滑增长

1 个答案: