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. StampedLock的理解和使用

    StampedLock介绍 StampedLock是为了优化可重入读写锁性能的一个锁实现工具,jdk8开始引入 相比于普通的ReentranReadWriteLock主要多了一种乐观读的功能 在API ...

  2. Nito.AsyncEx 这个库

    有一个非常聪明的小伙子 (我高度赞扬) 叫 Stephen Cleary ,他写了一个很棒的 Extension 集,共同参与开发的还有 Stephen Toub (他显然是经验丰富的),所以我充分信 ...

  3. [集训]FWT基础练习题

    题意 给出n个长度为20的二进制数和数字k,每次询问给出一个二进制数,问从n个数中挑k个数(不能重复)的按位或能包含询问的组合有多少个.数字均小于等于5E5,1s. 思考 强行算出2^20个答案,再O ...

  4. 解决---MISCONF Redis被配置为保存RDB快照，但目前无法在磁盘上存留。可能修改数据集的命令被禁用。请检查Redis日志，了解有关错误的详细信息。

    解决---MISCONF Redis被配置为保存RDB快照,但目前无法在磁盘上存留.可能修改数据集的命令被禁用.请检查Redis日志,了解有关错误的详细信息. 出现bug: 在学习celery,将数据 ...

  5. mysql--->profile使用

    Mysql分析-profile详解 简介 Profiling是从 mysql5.0.3版本以后才开放的. 启动profile之后,所有查询包括错误的语句都会记录在内. 此工具可用来查询SQL执行状态, ...

  6. divide and conquer - 最大连续子序列 - py

    以HDU1231为例,代码之没法交如下: inf = 0x3f3f3f3f a = [0 for i in range(10005)] ans, L, R = -inf, 0, 0 def divid ...

  7. OpenResty学习指南（二）

    我的个人博客:https://www.luozhiyun.com/ 数据结构table table并没有区分开数组.哈希.集合等概念,而是揉在了一起. local color = {first = & ...

  8. 06讲案例篇：系统的CPU使用率很高，但为啥却找不到高CPU的应用

    小结 碰到常规问题无法解释的 CPU 使用率情况时,首先要想到有可能是短时应用导致的问题,比如有可能是下面这两种情况. 第一,应用里直接调用了其他二进制程序,这些程序通常运行时间比较短,通过 top ...

  9. k3s新版本发布！支持Helm3！还有其他重要更新Highlight！

    前 言 两个月前,业界应用最为广泛的Kubernetes管理平台创建者Rancher Labs(以下简称Rancher)在KubeCon2019北美峰会上宣布,Rancher打造的轻量级Kuberne ...

  10. linux笔记之解压

    从1.15版本开始tar就可以自动识别压缩的格式,故不需人为区分压缩格式就能正确解压: Linux下常见的压缩包格式有5种:zip tar.gz tar.bz2 tar.xz tar.Z 其中tar是 ...