为了账号安全,请及时绑定邮箱和手机立即绑定

JQuery动画

标签:
JQuery

       toggle、sildeToggle和fadeToggle的区别和自定义动画.animate()

1   操作元素显示和隐藏的常见的4种方法
   改变样式display为none
   设置位置高度为0
   设置透明度为0
   还有show/hide、sildeDown/sildeUp、fadeIn/fadeOut、toggle、sildeToggle和fadeToggle切换方法
2   toggle、sildeToggle和fadeToggle的区别

   toggle切换显示与隐藏效果,动态效果为从右至左,横向动作,通过display来判断切换所有匹配元素的可见性    

   sildeToggle切换上下拉卷滚效果,动态效果从下至上,竖向动作, 通过高度变化来切换所有匹配元素的可见性    

   fadeToggle切换淡入淡出效果
3   .animate()可以精确的控制样式属性从而执行动画,允许在任意的数值的CSS属性上创建动画

4   常见的.animate()语法

   .animate( properties ,[ duration  ], [ easing ], [ complete ] )

   .animate( properties, options )传递一个对象参数可以拿到动画执行状态的一些通知

5   options参数

   duration设置动画执行的时间

   easing规定要使用的easing函数,过渡使用哪种缓动函数

   step规定每个动画的每一步完成之后要执行的函数

   progress每次动画调用的时候都会执行这个回调,是一个进度的概念

   complete动画完成回调

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

7   唯一必要的属性是一组CSS属性键值对,这组属性和用于设置.css()方法的属性键值对类似,除了属性范围做了更多限制,第二个参数可以单独传递多个实参也可以合并成一个对象传递

8   properties一个或多个css属性的键值对所构成的Object对象,所有用于动画的属性必须是数字的,除非另有说明,如果不是数字将不能使用基本的jQuery功能,比如border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing都是能产生动画效果的,background-color不可以,因为参数是red或者GBG这样的值,非常用插件,正常情况下是不能只用动画效果的

9   CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")

10   属性值的单位像素(px),除非另有说明,单位em 和 %需要指定使用

11   除了定义数值,每个属性能使用'show', 'hide', 和 'toggle',这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

12   提供一个以+= 或 -=开始的值,目标值是以这个属性的当前值加上或者减去给定的数字来计算的

13   动画执行的时间,持续时间是以毫秒为单位的,值越大表示动画执行的越慢,不是越快,还可以提供'fast' 和 'slow'字符串,分别表示持续时间为200 和 600毫秒

14   easing动画运动的算法在jQuery库中默认调用 swing,如果需要其他的动画算法,则查找相关的插件

15   complete回调,动画完成时执行的函数,可以保证当前动画确定完成后发会触发

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消