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回调,动画完成时执行的函数,可以保证当前动画确定完成后发会触发


本文转自 拉考的考拉 51CTO博客,原文链接:http://blog.51cto.com/lakaodekaola/2082804


相关文章
N..
|
2月前
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
32 1
|
2月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
|
2月前
|
机器学习/深度学习 JavaScript
|
10月前
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
53 0
|
10月前
|
JavaScript
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
60 0
|
10月前
|
JavaScript
jQuery 自定义动画 animate(详细步骤)
jQuery 自定义动画 animate(详细步骤)
67 0
|
10月前
|
JavaScript
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
55 0
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
|
16天前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
17 0
|
22天前
|
JavaScript
jQuery 动画小练习
jQuery 动画小练习
16 0
|
25天前
|
JavaScript 前端开发
我如何使用jQuery动画我的元素
我如何使用jQuery动画我的元素
12 0