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. .net core 3.1 DbFirst mysql

    这是一套完全配置正确的方式 创建项目此步骤省略 打开nuget 搜索 Pomelo.EntityFrameworkCore.MySql 添加完毕该引用之后nuget 搜索 Microsoft.Enti ...

  2. JSONArray 与 List 互转

    List 转 JSONArray // 通过JSONPath获取其中数据,也可以说自己生成的List List<JSONObject> caseList = JsonPath.read(r ...

  3. vwmare 十月第　１　弹

    step one 不管 是 ubuntu 还是 win vm tools 都是需要在虚拟的系统里面的去安装的. 这一点是相同的.

  4. sharding-JDBC学习笔记

    sharding-JDBC学习笔记 ShardingSphere ShardingSphere是一套开源的分布式数据库中间件解决方案组成的生态圈,它由Sharding-JDBC.Sharding-Pr ...

  5. apace访问403错误的解决方法汇总

    作为一个努力学习的实习生,遇到问题还是靠记录才能更好的学习. 首先附上故障图 翻译过来就是啥呢? 于是天真的我去百度了一下大神们的解决方法,目录没权限嘛,来个777就完事了.一开始还觉得挺合乎情理的, ...

  6. 用什么库写 Python 命令行程序？看这一篇就够了

    作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  7. 《快乐编程大本营》java语言训练班 3课:java的运算符

    第1节. 算术运算符 第2节. 递增和递减运算符 第3节. 比较运算符 第4节. 逻辑运算符 第5节. 运算符优先级 第6节. 字符串运算 http://code6g.com/pxphp/px/ban ...

  8. Lighthouse

    北大程郁缀教授: 一,"日月之行,若出其中,星汉灿烂,若出其里."要找机会去感受大海,男人要有大海一样的胸怀,大气者方能成大器. 二,"亦余心之所善兮,虽九死其而未悔.& ...

  9. C/C++中指针和引用之相关问题研究

    一.基本知识 指针和引用的声明方式: 声明指针: char* pc; 声明引用: char c = 'A'                   char& rc = c; 它们的区别: ①从现 ...

  10. 90万条数据玩转RFM用户分析模型

    RFM,是一种经典的用户分类.价值分析模型: R,Rencency,即每个客户有多少天没回购了,可以理解为最近一次购买到现在隔了多少天. F,Frequency,是每个客户购买了多少次. M,Mone ...