博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery1.9(动画效果)学习之——.fadeTo( duration, opacity [, complete ] )
阅读量:4150 次
发布时间:2019-05-25

本文共 1405 字,大约阅读时间需要 4 分钟。

 

描述: 调整匹配元素的透明度。

 

.fadeTo( duration, opacity [, complete ] )

 

  • duration
    类型:
    一个字符串或者数字决定动画将运行多久。
  • opacity
    类型:
    0和1之间的数字表示目标元素的不透明度。
  • complete
    类型: ()
    在动画完成时执行的函数。

 

.fadeTo( duration, opacity [, easing ] [, complete ] )

 

  • duration
    类型:
    一个字符串或者数字决定动画将运行多久。
  • opacity
    类型:
    0和1之间的数字表示目标元素的不透明度。
  • easing
    类型:
    一个字符串,表示动画过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件)
  • complete
    类型: ()
    在动画完成时执行的函数。

.fadeTo() 方法通过匹配元素的不透明度做动画效果。

 

延时时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast''slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400毫秒的延时。和其他效果方法不同,.fadeTo()需要明确的指定duration参数。

 

如果提供回调函数参数,回调函数会在动画完成的时候调用。这个对于将不同的动画串联在一起按顺序排列是非常有用的。这个回调函数不设置任何参数,但是this指向执行动画的DOM元素。如果多个元素一起做动画效果,值得注意的是这个回调函数在每个匹配元素上执行一次。这个动画不是作为一个整体。

 

我们可以给任何元素做动画,比如一个简单的图片:

Click here
With the element initially shown, we can dim it slowly:$('#clickme').click(function() {$('#book').fadeTo('slow', 0.5, function() {// Animation complete.});});

 

duration设置为0,这个方法只是改变opacity CSS属性,所以.fadeTo(0, opacity).css('opacity', opacity)是一样的效果。

Additional Notes:(其他注意事项:)

  • 所有jQuery效果,包括.fadeTo(),都能通过设置jQuery.fx.off = true全局的关闭,效果等同于持续时间设置为0。更多信息查看 .

 

例子:

 

Example: 把第一个段落的透明度渐变成 0.33 (33%,大约三分之一透明度), 用时 600 毫秒。

Click this paragraph to see it fade.

Compare to this one that won't fade.

 

 

Example: 每次点击后把 div 渐变成随机透明度,用时 200 毫秒。

And this is the library that John built...

 

Example: 找到正确答案!渐变耗时 250 毫秒,并且在完成后改变字体样式。

Wrong

Wrong

Right!

 

转载地址:http://ovlti.baihongyu.com/

你可能感兴趣的文章
使用bash解析xml
查看>>
android系统提供的常用命令行工具
查看>>
【Python基础1】变量和字符串定义
查看>>
【Python基础2】python字符串方法及格式设置
查看>>
【Python】random生成随机数
查看>>
【Python基础3】数字类型与常用运算
查看>>
【Python基础4】for循环、while循环与if分支
查看>>
【Python基础6】格式化字符串
查看>>
【Python基础7】字典
查看>>
【Python基础8】函数参数
查看>>
【Python基础9】浅谈深浅拷贝及变量赋值
查看>>
Jenkins定制一个具有筛选功能的列表视图
查看>>
【Python基础10】探索模块
查看>>
【Python】将txt文件转换为html
查看>>
[Linux]Shell脚本实现按照模块信息拆分文件内容
查看>>
idea添加gradle模块报错The project is already registered
查看>>
在C++中如何实现模板函数的外部调用
查看>>
在C++中,关键字explicit有什么作用
查看>>
C++中异常的处理方法以及使用了哪些关键字
查看>>
内存分配的形式有哪些? C++
查看>>