动画完成以后的回调函数

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在动画的方法里,可以再传递一个函数作为它的参数 … 这个函数在完成动画的时候会去执行 … (#js)

在 持续时间 这个参数的后面,加上一个逗号 … 再使用一个 匿名函数 .. 这个函数要做的就是在控制台上输出一点文字 …

$('.album').fadeOut(1000, function() {
console.log('完成了动画');
});

保存 … 再回到浏览器 … 点击 隐藏 …

你会看到动画完成以后,会在控制台上输出指定的文字 … 注意这个文字显示了四次 ,说明这个函数被调用了四回 …

因为我们选择了四个元素,然后对这四个元素应用了动画 … 所以指定的回调函数也会被执行四回 ..

递归

下面我们可以做点有意思的事,点击 隐藏 按钮的时候,逐个去隐藏封面 … 我们可以先去选中最后一个封面,然后调用逐渐消失方法 …

给这个方法指定一个回调函数 … 这个函数做的事就是去逐渐消失封面的上一个封面 … 然后递归地去调用这个函数 … 用到的东西是函数的 arguments 对象的 callee 属性 … 它会递归地去调用匿名函数本身 …

$('.off').click(function () {
$('.album:last').fadeOut('fast', function () {
$(this).prev().fadeOut('fast', arguments.callee);
});
});

(#js),选中最后一个 .album 元素,可以加上一个 :last 选择器 … 动画的持续时间用一个字符串 fast … 它指带的持续时间是 200ms …

动画完成以后,去调用函数 …

在这个函数里,用 jQuery 函数封装一下当前发生动画的这个元素,把它转换成一个 jQuery 对象 … 然后使用 .prev() 方法 … 选择它的上一个兄弟 … 再调用 .fadeOut() 方法,把这个兄弟逐渐消失掉 …

消失的过程可以让它快一些 … fast … 然后用一个 arguments.callee … 它可以递归地去调用这个函数函数 …

保存 …

回到浏览器 … 点击 隐藏 …

jQuery 首先会选中最后一个封面,把它逐渐消失掉,再去调用动画的回调函数,去把它上一个兄弟逐渐消失掉 … 然后再去递归地调用这个函数 … 把所有的兄弟都逐渐消失掉 …

下面,我们可以使用同样的方法,去处理一下这个显示按钮 … 点击它,可以从左到右逐个去显示封面 …

$('.album:first').fadeIn('fast', function () {
$(this).next().fadeIn('fast', arguments.callee);
});

这样我们需要先选中第一个封面 … 然后把 .fadeOut() … 都改成 .fadeIn() …

保存 … 再回来看一下 …

点击隐藏 … 会从右向左逐个消失 … 点击 显示 … 会从左到右逐个显示 …

动画完成以后的回调函数《 jQuery 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点