章节
问答
课签
笔记
评论
占位
占位

jQuery中动画animate(下)

animate在执行动画中,如果需要观察动画的一些执行情况,或者在动画进行中的某一时刻进行一些其他处理,我们可以通过animate提供的第二种设置语法,传递一个对象参数,可以拿到动画执行状态一些通知

.animate( properties, options )

options参数

  • duration - 设置动画执行的时间
  • easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数
  • step:规定每个动画的每一步完成之后要执行的函数
  • progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念
  • complete:动画完成回调

其中最关键的一点就是:

如果多个元素执行动画,回调将在每个匹配的元素上执行一次,不是作为整个动画执行一次

列出常用的方式:

$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

 

 

 

任务

?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / weixin_慕工程1563154
https://m.vk.com/@712781708-92632https://m.vk.com/@712782082-144309https://m.vk.com/@712782483-51160https://m.vk.com/@712781332-148356https://m.vk.com/@712772904-100584https://m.vk.com/@712774205-94366https://m.vk.com/@712534118-38152https://m.vk.com/@712...

最新回答 / weixin_慕工程1563154
https://m.vk.com/topic-210967729_48611858https://m.vk.com/topic-210967729_48611861https://m.vk.com/topic-210967729_48611862https://m.vk.com/topic-210967729_48611863https://m.vk.com/topic-210967729_48611866https://m.vk.com/topic-210967729_48611869https://m...

已采纳回答 / 一直在路上Brave
step:规定每个动画的每一步完成之后要执行的函数progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念

最新回答 / qq_慕容6371432
fx在这里相当于函数本身 你可以理解为this

已采纳回答 / 水冰月大魔王灬
fadeIn是让隐藏的东西能看得见,fadeOut是让看得见的东西看不见,这个你应该知道然后你这个在没有执行动画之前是这样的<...图片...>    $('#two').fadeIn(1000).fadeOut(1000);   $('#two').fadeOut(1000).fadeIn...

最新回答 / 用户1098335
没啥意思吧,我也没看懂

最新回答 / _Rainy
http://api.jquery.com/animate/   这个now是两个变换共用的值 不停的变 可以通过把所有的now打印出来,该网址有具体的过程。每次都有两个值,但是获取的每次都是第二值 第一个值进入第二个变换再次改变了now,之前我们封装函数这种情况是给两次事件单独设置一个属性 解决这个共用函数冲突,这个.animate()有类似的方法 来单独获取到不同变换的当前值now吗?

最新回答 / 永江衣玖
我感觉吧,在这里(now,fx)组成了一个集合,里面有两个元素,第一个是now,第二个是fx。arguments[]  指的就是这个集合,此时arguments[]里面有两个元素,这个集合从arguments[0]开始arguments[0]代表了now,arguments[1]代表了fx至于progress,大概就是显示进度条吧,我把这个去掉了,高度还在变化,但是里面的文字不显示了

最赞回答 / Camila爱学习
刚学只能解答部分,如果说错欢迎指正。specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数step - 规定动画的每一步完成之后要执行的函数progress - 每一次动画调用的时候会执行这个回调,就是一个进度的概念以上是定义。例子1中, step: function(now, fx) {                   $aaron.text('高度的改变值:'+now)这里的,now,和 fx 应该是自定义的,我尝试换成别的字母...

最新回答 / 白小九
这不是冒泡,也不只弹出三次。你把alert改成console.log看看就知道了。如果要只弹出一次,那就把alert写在complete里:<...code...>至于进度直接从0变成1,这个我不知道,大概要用.stop()方法吧。

最新回答 / 嘤嘤嘤嘤哼
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

已采纳回答 / 水墨流沙
noww接收的是每次动画时height的值,fxx是指每个动画的每一步完成之后要执行的函数. step自动执行的这个函数. arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。arguments非常类似Array,但实际上又不是一个Array实例.arguments对象的长度是由实参个数而不是形参个数决定的。形参是函数内部重新开辟内存空间存储的变量,但是其与arguments对象内存空间并不重叠.也就是说此时的arguments[1]代表的是progress的进度,而它是从0-1的...

最赞回答 / angeliuwj4109780
1、.animate(properties,options)中包含两个参数,options参数包括几种,其中step:规定每个动画的每一步完成之后要执行的函数;progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念。2、arguments中数组值代表函数第几个参数。这里arguments[1]代表第二个参数,则是代表fx。3、这个程序没有提供完整,在程序上面应该会定义原先的块级高度是100,动画中目标高度是50,所以执行动画时从100减到50。4、显示为1代表动画进度完成到百分百。效果为...

已采纳回答 / 慕粉4152485
可以调试下,我在sublime上试了下,下面是我查到的,希望能帮到你理解             now:是当前动画正在改变的属性的实时值;             fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如          执行动画的元素:elem;             动画正在改变的属性:prop;             正在改变属性的当前值:now;             正在改变属性的结束值:end;              正在改变属性的单位:unit...
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言