jQuery 源码解析(三十一) 动画模块 便捷动画详解

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    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>

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 );
    };
});