让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像素并再次调用自身，从而创建持续动画效果。
然而，需要注意的是，直接用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)。这种方法更简洁高效。 最终选择哪种方法取决于项目需求和性能考量。
以上就是如何用jQuery和CSS实现div宽度持续动态变化的动画效果？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
899
