让div宽度动起来：两种方法实现持续动画效果

本文将演示如何使用jQuery和CSS创建持续动态变化的div宽度动画效果，目标宽度范围为0到400像素。我们将重点关注如何利用animate()方法（如题设要求）以及更有效的CSS3动画实现。

首先，我们尝试使用jQuery的animate()方法。虽然某些示例中使用了animate()方法但修改了高度而非宽度，这里我们修正代码以实现宽度变化：

<div id="app"></div>

<style>
#app {
    height: 100px;
    background: red;
}
</style><script>
function animate() {
    $('#app').animate({ width: '400px' }, 'slow', function() {
        $('#app').animate({ width: '0px' }, 'slow', animate);
    });
}
animate();
</script>

这段代码创建了一个高度为100像素的红色div。animate()方法先将宽度动画设置为400像素（持续时间为'slow'）。动画完成后，回调函数再次调用animate()，将宽度设回0像素并再次调用自身，从而创建持续动画效果。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

然而，需要注意的是，直接用jQuery的animate()方法创建无限循环动画可能会影响性能。更优的方案是使用CSS3动画：

#app {
    height: 100px;
    background: red;
    animation: widthChange 2s linear infinite;
}

@keyframes widthChange {
    0% { width: 0px; }
    50% { width: 400px; }
    100% { width: 0px; }
}

这段CSS代码使用@keyframes定义名为widthChange的动画，在2秒内将宽度从0像素变化到400像素，再回到0像素，并设置为无限循环(infinite)。这种方法更简洁高效。 最终选择哪种方法取决于项目需求和性能考量。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！