22、JavaScript与jQuery：动画、效果及图像操作技巧

z2a3b4c5d

于 2025-11-04 09:42:50 发布

阅读量6

点赞数

CC 4.0 BY-SA版权

分类专栏：解锁jQuery交互魔法文章标签： JavaScript jQuery 动画效果

本文链接：https://blog.youkuaiyun.com/z2a3b4c5d/article/details/155565473

52 篇文章 ¥499.90

订阅专栏¥69.90

JavaScript与jQuery：动画、效果及图像操作技巧

在网页开发中，jQuery提供了强大的动画功能，让我们可以轻松为页面元素添加各种动画效果。

如果想为同一个页面元素添加多个动画效果，并不一定需要使用回调函数。例如，要将一张照片移动到屏幕上，然后使其淡出视野，可以这样操作：

$('#photo').animate(
    {
        left: '+=400px'
    },
    1000
); // end animate
$('#photo').fadeOut(3000);

虽然浏览器会立即执行代码，但jQuery会将每个效果放入队列中，先执行动画，再执行 fadeOut() 函数。使用jQuery链式调用可以将代码改写为：

$('#photo').animate(
    {
        left: '+=400px'
    },
    1000
).fadeOut(3000);

如果要让照片淡入、淡出，然后再淡入，可以使用链式调用：

$('#photo').fadeIn(1000).fadeOut(2000).fadeIn(250);