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. 第二阶段冲刺个人任务——four

    今日任务: 优化统计团队博客结果界面的显示. 昨日成果: 优化统计个人博客结果页面的显示.

  2. GitHub学习之路1

    对于代码的管理以及维护上,GitHub不失为一个较为明智的选择.而对于GitHub的灵活应用也是相当重要的,以下记录为以防自己忘记. 1. 创建SSH Key ssh-keygen -t rsa –C ...

  3. 创建dynamics CRM client-side (十四) - Web API

    Xrm.WebApi 是我们做前端开发不可不缺少的内容. Xrm.WebApi 分为online和offline online: 可以实现和服务器的CRUD交互 offline: 多用于mobile ...

  4. ios--->instrument的leaks来检查内存泄漏

    instrument来检查内存泄漏 1.第一步打开 或者: 然后选择leaks 2.若此时编译出现如下问题,可能是非debug版本造成的,切换成debug版本即可 打开工程的Edit Scheme选项 ...

  5. Java反射机制——学习总结

    前几天上REST课,因为涉及到Java的反射机制,之前看过一直没有用过,有些遗忘了,周末找了些资料来重新学习,现在总结一下,加深印象. 什么是反射机制? 参考百度百科对java反射机制的定义: “JA ...

  6. Spring AOP源码分析--代理方式的选择

    能坚持别人不能坚持的,才能拥有别人未曾拥有的.关注编程大道公众号,让我们一同坚持心中所想,一起成长!! 年前写了一个面试突击系列的文章,目前只有redis相关的.在这个系列里,我整理了一些面试题与大家 ...

  7. TypeScript躬行记（6）——高级类型

    本节将对TypeScript中类型的高级特性做详细讲解,包括交叉类型.类型别名.类型保护等. 一.交叉类型 交叉类型(Intersection Type)是将多个类型通过“&”符号合并成一个新 ...

  8. ros中launch启动文件的使用方法

    launch文件:通过XML文件实现多节点的配置和启动(可自动启动ROS Master) launch文件中包含很多标签和属性 *launch文件语法 <launch> <node ...

  9. 十二、sed文本处理

    一.概述 1.sed 是一款流编辑工具,用来对文本进行过滤与替换工作,特别是当你想要对几十个配置文件做统计修改时,你会感受到 sed 的魅力!sed 通过输入读取文件内容,但一次仅读取一行内容进行某些 ...

  10. js笔记（5）--location的用法

    !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g ...