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. exp2:// 一次存储型XSS从易到难的挖掘过程

    一日在某站点发现一个找茬活动,感觉是另类的src就参与了一下.就发生了这次有趣的XSS测试过程. 0×00 开始 (注意1)XSS不仅存在于页面上直观所在的位置,所有用户输入的信息都有可能通过不同形式 ...

  2. 团队项目——Alpha发布1

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/homework 这个作业要求在哪里 https ...

  3. CF572_Div2_D2

    题意 http://codeforces.com/contest/1189/problem/D2 思考 显然地,如果出现度数为2且两条出边边权不相同的情况,是无法构造合法方案的. 下面考虑缩边后的树, ...

  4. Shell常用命令之sort

    sort命令 sort命令是在Linux里非常有用,它将文件进行排序,并将排序结果标准输出.sort命令既可以从特定的文件,也可以从stdin中获取输入. 语法 sort (选项) (参数) 选项 - ...

  5. 《ASP.NET Core 高性能系列》关于.NET Core的配置信息的若干事项

    1.配置文件的相关闲话 Core自身对于配置文件不是必须品,但由上文分析可知ASP.NET Core默认采用appsettings.json作为配置文件,关于配置信息的优先等级 命令行>环境变量 ...

  6. 从App.config中读取数据库连接字符串

    1.首先在App.config文件中添加如下代码注意<connectionStrings>插入位置. <connectionStrings> <add name=&quo ...

  7. 3、MySQL 索引失效的场景

    索引失效的场景: 1.没有 where 条件 直接看 SQL 语句   2.where 条件中所在的列没有建立索引 show index from t;   3.从表中取得数据超过某个阈值.通常认为是 ...

  8. 仅主机、NAT、桥接模式

    三种模式区别: 桥接模式 :通过主机映射一个ip给虚拟机,只要主机可以访问外网.虚拟机也可以访问,两机可以相互通信. NAT模式:主机和虚拟机在同一个地址,原则上两者不能相互通信,但是通过修改NAT配 ...

  9. Notepad++ Plugin Manager更新插件出错

    作为墙内人士,更新个插件都TMD浪费很长时间! 解决方案: 定位文件notepaid++\updater\GUP.exe What is WinGup? --------------- WinGup ...

  10. android webview正确显示音标

    package com.example.fonttest; import android.support.v7.app.ActionBarActivity; import android.webkit ...