如何用jQuery和CSS实现div宽度持续动态变化的动画效果？（宽度.如何用.变化.持续.效果.....）

wufei123 2025-03-01 阅读:2 评论:0

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

如何用jQuery和CSS实现div宽度持续动态变化的动画效果？

让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宽度持续动态变化的动画效果？的详细内容，更多请关注知识资源分享宝库其它相关文章！