`
sungang_1120
  • 浏览: 322505 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

jQuery1.9(动画效果)学习之—— .fadeToggle( [duration ] [, easing ] [, complete ] )

阅读更多

 

描述: 通过匹配的元素的不透明度动画,来显示或隐藏它们。

 

.fadeToggle( [duration ] [, easing ] [, complete ] )

 

  • duration (默认: 400)
    类型: Number or String
    一个字符串或者数字决定动画将运行多久。
  • easing (默认: swing)
    类型: String
    一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件)
  • complete
    类型: Function()
    在动画完成时执行的函数。

.fadeToggle( options )

 

  • options
    类型: PlainObject
    一组包含动画选项的值的集合。 支持的选项:
    • duration (default: 400)
      Type: Number or String
      一个字符串或者数字决定动画将运行多久。(愚人码头注:默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000) )
    • easing (default: swing)
      Type: String
      一个字符串,表示过渡使用哪种缓动函数。(愚人码头注:jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件)
    • queue (default: true)
      Type: Boolean or String
      一个布尔值,指示是否将动画放置在效果队列中。如果为false时,将立即开始动画。 从jQuery1.7开始,队列选项也可以接受一个字符串,在这种情况下,在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用,动画不会自动启动;你必须调用.dequeue("queuename")来启动它。
    • specialEasing
      一组一个或多个通过相应的参数和相对简单函数定义的CSS属性 ( 1.4 新增)
    • step
      Type: Function( Number now, Tween tween )
      每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
    • progress
      Type: Function( Promise animation, Number progress, Number remainingMs )
      每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数。 (version added: 1.8)
    • complete
      Type: Function()
      在动画完成时执行的函数。
    • done
      Type: Function( Promise animation, Boolean jumpedToEnd )
      在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: 1.8)
    • fail
      Type: Function( Promise animation, Boolean jumpedToEnd )
      动画失败完成时执行的函数。(他的Promise对象状态未完成)。 (version added: 1.8)
    • always
      Type: Function( Promise animation, Boolean jumpedToEnd )
      在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。 (version added: 1.8)

 

.fadeToggle()方法执行匹配元素的不透明度动画。当被可见元素调用时,元素不透明度一旦达到0,display样式属性设置为none ,所以元素不再影响页面的布局。

延时时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast''slow' 分别代表200和600毫秒的延时。(译者注:如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400

分享到:
评论

相关推荐

    jquery.easing.1.3.min.js

    jquery.easing.1.3.min.js 动画效果js

    jquery.easing.js_jquery.easing.js_passageztr_

    首先,jQuery Easing.js是jQuery库的一个扩展,主要用于增强jQuery的动画效果。它提供了一系列的缓动函数(easing functions),这些函数可以改变动画的速度曲线,从而创造出更加平滑、自然或个性化的过渡效果。在...

    基于Jquery可居中显示并兼容IE6+/FF等浏览器的瀑布流程序(jquery.easing.js,jquery.vgrid.js实现)

    在本项目中,通过结合Jquery库和两个特定的插件——jquery.easing.js与jquery.vgrid.js,实现了这种布局,并且确保了在包括IE6+以及Firefox在内的多种浏览器中的兼容性。 1. Jquery:Jquery是一个广泛使用的...

    jquery.easing.1.3.js

    css3过渡效果不够用?通过jquery.easing.1.3.js可以为为动画增加更多的过渡效果如$('div').animate({'left':300},3000,'easeInOutElastic',function(){ //动画执行完毕回调函数 });

    jquery.easing动画插件

    而`jquery.easing.js`插件正是jQuery动画效果的一个扩展,它为开发者提供了更精细的动画控制,实现了直线匀速运动、变加速运动以及缓冲等复杂动画效果。 **1. 插件简介** `jquery.easing.js`是基于jQuery的一款轻量...

    jQueryRotate.2.2.js和jquery.easing.min.js插件

    js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器 大转盘原理:随机出一个数字,通过后台算出在那个概率区间返回指定跳转的角度 例 一等奖 概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内 二等奖 ...

    jQueryRotate.2.2.js jquery.easing.1.3.js

    `jquery.easing.1.3.js`包含了多种 easing 函数,这些函数可以改变动画的速度曲线,让动画从快到慢、从慢到快或按照特定模式变化。Easing函数通常与jQuery的`animate()`方法结合使用,为过渡效果带来更加自然和流畅...

    jQuery.easing.js 1.3 动画效果扩展 jQuery 插件.rar

    jquery.easing.js 1.3 是一个配合jquery实现完美动画效果的扩展插件,比如我们在使用jquery制作一幅图片滚动或图片渐变,使用本插件可扩展或增强jquery性能,生成完美无缺兼容性更好的jquery动画来,它不仅可以用于...

    jquery.easing.js 1.3 动画效果扩展插件.zip

    为了丰富动画效果的多样性,jQuery社区开发了各种插件,其中之一就是`jquery.easing.js`。这个插件为jQuery的动画效果提供了更多的缓动函数(easing functions),使动画更加平滑和动态。 **1. jQuery Easing插件...

    jQuery动画库页面滚动元素动画.zip

    总之,“jQuery动画库页面滚动元素动画.zip”这个资源将帮助开发者学习如何利用jQuery创建动态且引人入胜的页面滚动效果,同时加深对前端开发中CSS、JavaScript以及jQuery交互的理解。通过实践和学习这些技术,...

    jQuery插件---easing..rar

    jQuery easing插件包含了一个名为`jquery.easing.js`的脚本文件,这个文件中定义了许多预设的缓动函数,如`linear`(线性)、`swing`(jQuery默认的缓动效果,类似于ease-in-out)、`easeInQuad`(二次方的缓入)、`...

    jQuery easing.js

    asing插件大家也许一直在用,非常的不错,能实现很多你想要的效果,并且jquery的很多内置方法也开始支持Easing参数了,经常使用jquery的朋友一定会知道需要下载这个jar包

    jQuery变形动画导航下拉菜单代码.zip

    这些方法可以配合动画时间和 easing 函数(如`easeInOutQuad`)来实现平滑的过渡效果。 4. **图片资源**: `img` 文件夹可能包含了菜单项的图标或者其他与菜单相关的图像资源。在CSS中,这些图片可能会通过`...

    jquery.easing.1.3

    jquery著名插件,easing,为animate动画提供不同的效果

    jquery.easings.min.js

    jquery.easings.min.js

    jQuery easing动画运动效果.zip

    本资源“jQuery easing动画运动效果.zip”显然聚焦于jQuery的动画特性,特别是其easing(缓动)功能。缓动是使动画更加平滑、自然的一种技术,它允许我们自定义元素在运动过程中的速度变化,比如从快速到慢速或反之...

    网页模板——基于jquery来实现图片滑动门效果.zip

    本资源“网页模板——基于jquery来实现图片滑动门效果.zip”提供了使用JavaScript库jQuery实现这一效果的具体方案。 jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,...

    jquery淡出淡进文字动画效果.zip

    这两个方法可以设置速度(duration)、完成时的回调函数(complete)以及淡入淡出的模式(easing)。例如,我们可以将一段文字隐藏(初始状态下设置`display:none;`),然后使用`.fadeIn()`使其在指定时间逐渐显示...

    jQuery动画-让页面动起来.doc

    jQuery 动画是前端开发中的一大利器,它简化了JavaScript中复杂的动画实现,使得开发者可以快速、高效地创建出各种动态效果。本文档将深入探讨jQuery动画的相关知识,从基础到进阶,帮助你掌握这一强大的功能。 一...

    jquery1.7 API/jquery-1.7.1.min.js/jquery-1.7.1.js

    动画效果是jQuery的一大亮点,如`.fadeIn()`, `.slideUp()`, `.animate()`等,可以轻松创建复杂的视觉效果。 8. **插件生态系统**: jQuery 1.7版本依然支持丰富的插件生态,如jQuery UI,可以扩展更多的功能,如...

Global site tag (gtag.js) - Google Analytics