jQuery中animate的回调函数的说明

最新推荐文章于 2020-12-08 22:09:04 发布

happybear_

最新推荐文章于 2020-12-08 22:09:04 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web jquery JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/happybear_/article/details/105262101

web 同时被 3 个专栏收录

4 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

jquery

1 篇文章

订阅专栏

本文深入解析jQuery动画animate函数的两种回调函数用法，包括传统callback及现代complete回调，解决使用中的常见问题，如speed参数无效及如何正确设置回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上搜索jquery animate基本上都是简单的说明。

直接说两种用法的回调函数（本例中我所使用的版本为：jquery-1.11.3.min.js）：

第一种：

(selector).animate({styles},speed,easing,callback)
//第一种的回调函数没有什么好说直接调用即可

第二种：

(selector).animate({styles},{options})

第二种，大部分网上资料给的是如下内容，并没有具体的解释这也导致我自己使用时被卡了半天：

styles 必需。规定产生动画效果的一个或多个 CSS 属性/值。 options 可选。规定动画的额外选项。可能的值： speed - 设置动画的速度 easing - 规定要使用的 easing 函数 callback - 规定动画完成之后要执行的函数 step - 规定动画的每一步完成之后要执行的函数 queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始。 specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

然而我试了多次第二种写法

$(xxx).animate({xxx}, {
            duration: 1000,//不知道为何speed设置无效
            step: function () {
                xxx
            },
            callback:function () {
                xxx
            }
        }

怎么也进不去callback函数，以为是jquery版本问题，但最后无意间在一个网站看到一个写法不是callback而是complete……

正确执行回调为如下

$(xxx).animate({xxx}, {
            duration: 1000,
            step: function () {
                xxx
            },
            complete:function () {
                xxx
            }
        }

网上对于jq的资料大部分都是较老的，jq的使用率也逐渐的下降，再加上css3动画的出现……