关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

$jQuery 源码解析动画模块 便捷动画详解

发布时间:2020-02-24 00:00:00

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>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>

效果如下:

由于不需要加载插件,只要一个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 );
    };
});

/template/Home/Zkeys/PC/Static