jquery在$.animate()这个接口上又封装了几个API，用于进行匹配元素的便捷动画，如下:

  • $(selector).show(speed,easing,callback)        ;如果被选元素已被隐藏，则显示这些元素
  • $(selector).hide(speed,easing,callback)         ;如果被选的元素已被显示，则隐藏该元素
  • $(selector).toggle(speed,easing,callback)     ;切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

writer by:大沙漠 QQ:22969969

  • $(selector).slideDown(speed,easing,callback);      ;向下滑动元素。
  • $(selector).slideUp(speed,easing,callback);           ;向上滑动元素
  • $(selector).slideToggle(speed,easing,callback);     ;在 slideDown() 与 slideUp() 方法之间进行切换。
  • $(selector).fadeIn(speed,easing,callback);           ;显示已隐藏的元素，慢慢的变淡，直至消失。
  • $(selector).fadeOut(speed,easing,callback);        ;隐藏可见元素,慢慢的显示，直至完全可见
  • $(selector).fadeToggle(speed,easing,callback);    ;在fadeIn()与fadeOut()方法之间进行切换。如果元素已淡出，则fadeToggle()会向元素添加淡入效果。如果元素已淡入，则fadeToggle()会向元素添加淡出效果。

参数都是一样的:

  • speed 　　;动画持续的时间，默认为0，可设为"slow"、"normal"、"fast"或毫秒数
  • easing 　　;动画函数，支持现行缓动函数linear和余弦缓动函数swing,默认是swing
  • callback　　;动画执行完之后，要执行的函数

举个例子:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

    <style>

        html,body,div,p{margin:0;padding:0;}

        div{width: 200px;height: 50px;float: left;margin:20px 20px 0 20px;}

        p{width: 200px;height: 50px;background: #f0c;border-radius: 4px;}

        select{border-color: #dcdfe6;height: 40px;line-height: 40px;padding:0 15px;font-size: 16px;margin-top: 20px;border-radius: 4px;}

        option{font-size: 14px;line-height: 34px;padding:0 20px;color: #606266;height: 34px;display: }

    </style>

</head>

<body>

    <div><p></p></div><select></select>

    <script>

        //给select新增下拉选项

        ['show','hide','toggle','slideDown','slideUp','slideToggle','fadeIn','fadeOut','fadeToggle'].forEach(function(val){

            $('select').append(`<option value="${val}">${val}</option>`)

        })

        //监听select的选择事件,执行p元素对应的动画事件

        $('select').change(function(){

            $('p')[$(this).val()](1000,'swing');

        })

    </script>

</body>

</html>

效果如下:

由于不需要加载插件，只要一个jQuery就可以实现这些动画了，所以使用起来是很方便的。

内部实现就是对于$.animate()的封装而已，如下:

var fxAttrs = [

        // height animations

        [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],         //高度动画

        // width animations

        [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],         //宽度动画

        // opacity animations

        [ "opacity" ]                                                                     //透明度

    ];

function genFx( type, num ) {             //负责为便捷方法生成动画样式集

    var obj = {};

    jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice( 0, num )), function() {

        obj[ this ] = type;

    });

    return obj;

}

//比如:getFx('show',1)生成的动画样式集合为:Object { height: "show", marginTop: "show", marginBottom: "show", paddingTop: "show", paddingBottom: "show" }

jQuery.each({

    slideDown: genFx( "show", 1 ),

    slideUp: genFx( "hide", 1 ),

    slideToggle: genFx( "toggle", 1 ),

    fadeIn: { opacity: "show" },

    fadeOut: { opacity: "hide" },

    fadeToggle: { opacity: "toggle" }

}, function( name, props ) {

    jQuery.fn[ name ] = function( speed, easing, callback ) {     //新增slideDown、slideUp、slideToggle、fadeIn、fadeOut、fadeToggle便捷方法

        return this.animate( props, speed, easing, callback );

    };

});

jQuery 源码解析(三十一) 动画模块 便捷动画详解的更多相关文章

  1. jquery源码解析：addClass，toggleClass，hasClass详解

    这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...

  2. jQuery 源码分析(十六) 事件系统模块 底层方法 详解

    jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上,而是基于数据缓存模块来管理监听函数的,事件模块代码有点多,我把它分为了三个部分:分底层方法.实例方法和便捷方法.ready事件来讲,好理 ...

  3. jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...

  4. jquery源码解析：expando，holdReady，ready详解

    jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的. jQuery.extend({       //当只有一个对象时,就把这个对象 ...

  5. jquery源码解析：val方法和valHooks对象详解

    这一课,我们将讲解val方法,以及对value属性的兼容性处理,jQuery中通过valHooks对象来处理. 首先,我们先来看下val方法的使用: $("#input1").va ...

  6. Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解

    当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...

  7. tp6源码解析-第二天,ThinkPHP6编译模板流程详解,ThinkPHP6模板源码详解

    TP6源码解析,ThinkPHP6模板编译流程详解 前言:刚开始写博客.如果觉得本篇文章对您有所帮助.点个赞再走也不迟 模板编译流程,大概是: 先获取到View类实例(依赖注入也好,通过助手函数也好) ...

  8. jQuery 源码解析(三十) 动画模块 $.animate()详解

    jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...

  9. JQuery源码解析（十一）

    内存泄露 什么是内存泄露? 内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.在C++中,因为是手动管理内存,内存泄露是经常出现的事情.而现在流行的C#和Java等语言采用了自动 ...

随机推荐

  1. 用JAVA分别实现WebSocket客户端与服务端

    最近公司在搞一个项目刚好需要用到WebSocket技术来实现实时数据的传输,因为之前也没接触过,所以捣鼓了好些天,最近恰巧有空就写写.有误的地方还请大牛们能及时指正. 项目背景:基于spring+sp ...

  2. Nutz框架-- Cnd条件使用原生sql

    案例 今天接到一个临时的业务需求,做一个简单的过滤作为临时业务需要使用一两天,于是想到在原有的Cnd条件上加上一个Not like 进行过滤,但是发现现有Cnd条件查询好像满足不了 解决方案 使用Nu ...

  3. Maven异常：Dynamic Web Module 3.0 requires Java 1.6 or newer.

    问题 我目前用的JDK 是java 1.8 ,搭建Maven项目的时候,设置Project facets后,出现来以下problem : Dynamic Web Module 3.0 requires ...

  4. Spring Boot 2.x基础教程：默认数据源Hikari的配置详解

    通过上一节的学习,我们已经学会如何应用Spring中的JdbcTemplate来完成对MySQL的数据库读写操作.接下来通过本篇文章,重点说说在访问数据库过程中的一个重要概念:数据源(Data Sou ...

  5. 场景7:带有Linux网桥的提供商网络

    此场景描述了使用带有Linux网桥的ML2插件的OpenStack网络服务的供应商网络实现. 供应商网络通常以灵活性为代价提供简单性.性能和可靠性.与其他场景不同,只有管理员可以管理提供者网络,因为它 ...

  6. 文件类练习题（FileInputStream类）

    应用FileInputStream类,编写应用程序,从磁盘上读取一个Java程序,并将源程序代码显示在屏幕上.(被读取的文件路径为:d:/myjava/Hello.java 内容自己决定): pack ...

  7. Eclipse导入项目提示No projects are found to import解决办法

    使用Eclipse导入项目时遇到No projects are found to import提示的解决办法. 这是因为导入的文件里面缺少两个文件:.classpath.project 在这里三种方案 ...

  8. bootstrap 表单类

    bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form>     添加 role="form&q ...

  9. java jdk1.8 32/64位 官方绿色版下载附安装教程

    java jdk1.8 32/64位 官方绿色版下载附安装教程 地址:https://www.jb51.net/softs/691593.html

  10. Go语言实现：【剑指offer】滑动窗口的最大值

    该题目来源于牛客网<剑指offer>专题. 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存 ...