//  Zepto.js//  (c) 2010-2015 Thomas Fuchs//  Zepto.js may be freely distributed under the MIT license.;(function($, undefined){  var document = window.document, docElem = document.documentElement,      origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle// origShow展示    origHide隐藏  origToggle展示隐藏开关  /**   * 便捷动画的核心方法   * @param el  DOM   * @param speed 持续时间   * @param opacity 不透明度   * @param scale 缩放   * @param callback 回调   * @returns {*}   */  // anim 主要针对缩放和透明度的过渡效果  // 对 animate方法的进一步的封装  function anim(el, speed, opacity, scale, callback) {    //修正参数  anim(el，callback）    if (typeof speed == ‘function‘ && !callback) callback = speed, speed = undefined    var props = { opacity: opacity }    if (scale) {      props.scale = scale      el.css($.fx.cssPrefix + ‘transform-origin‘, ‘0 0‘)  //设置变形原点    }    return el.animate(props, speed, null, callback)//不支持速率变化，  }  /**   * 底层方法：隐藏显示的元素   * @param el   * @param speed   * @param scale   * @param callback   * @returns {*}   */  // TODO 这里既然是hide的功能，为什么还要传入scale参数 ，这里有点多余  function hide(el, speed, scale, callback) {    //不透明度设为0，即完全透明，相当于隐藏元素。这里的原理是播放不透明-透明的过渡。    //具体代码为 $(dom).animate({opacity: 0, ‘-webkit-transform-origin‘: ‘0px 0px 0px‘, ‘-webkit-transform‘: ‘scale(0, 0)‘ },800)    //设置了变形原点，缩放为0，它就会缩到左上角再透明    return anim(el, speed, 0, scale, function(){      origHide.call($(this)) //调用隐藏      callback && callback.call(this)    })  }  /**   * 显示   * @param speed  持续时间   * @param callback   回调函数   * @returns {*}   */  $.fn.show = function(speed, callback) {    origShow.call(this)    //具体代码为 $(dom).animate({opacity: 1, ‘-webkit-transform-origin‘: ‘0px 0px 0px‘, ‘-webkit-transform‘: ‘scale(1, 1)‘ },800)    //设置了变形原点，缩放为0，它就会缩到左上角再透明    if (speed === undefined) speed = 0    // TODO 这个if，else有点奇怪    else this.css(‘opacity‘, 0)    return anim(this, speed, 1, ‘1,1‘, callback)  }  /**   * 隐藏   * @param speed      持续时间   * @param callback   回调函数   * @returns {*}   */  // TODO 为什么在上一不要封装出hide函数，难道其他地方有调用  $.fn.hide = function(speed, callback) {    if (speed === undefined) return origHide.call(this)    else return hide(this, speed, ‘0,0‘, callback)  }  /**   * 显示、隐藏开关   * @param speed     持续时间   * @param callback   回调函数   * @returns {*}   */  $.fn.toggle = function(speed, callback) {    if (speed === undefined || typeof speed == ‘boolean‘)      return origToggle.call(this, speed)    else return this.each(function(){      var el = $(this)      //这是toggle的关键逻辑      el[el.css(‘display‘) == ‘none‘ ? ‘show‘ : ‘hide‘](speed, callback)    })  }  /**   * 淡入淡出   * 原理： $(dom).animate({opacity: 1/0, ‘-webkit-transform-origin‘: ‘0px 0px 0px‘},800)   * @param speed  持续时间   * @param opacity 不透明度   * @param callback  回调函数   * @returns {*}   */  // 淡入淡出总函数  $.fn.fadeTo = function(speed, opacity, callback) {    return anim(this, speed, opacity, null, callback)  }  /**   *  淡入   * 原理： $(dom).animate({opacity: 1, ‘-webkit-transform-origin‘: ‘0px 0px 0px‘},800)   * @param speed   持续时间   * @param callback  回调函数   * @returns {*}   */  $.fn.fadeIn = function(speed, callback) {    var target = this.css(‘opacity‘).    if (target > 0) this.css(‘opacity‘, 0)    else target = 1    // 首先显示，然后变不透明    return origShow.call(this).fadeTo(speed, target, callback)  }    /**   *  淡出   * 原理： $(dom).animate({opacity: 0, ‘-webkit-transform-origin‘: ‘0px 0px 0px‘},800)   * @param speed   持续时间   * @param callback  回调函数   * @returns {*}   */  // fadeOut 会将元素先变为透明，然后隐藏  $.fn.fadeOut = function(speed, callback) {    return hide(this, speed, null, callback)  }  /**   * 淡入淡出开关   * @param speed   持续时间   * @param callback  回调函数   * @returns {*}   */  $.fn.fadeToggle = function(speed, callback) {    return this.each(function(){      var el = $(this)      el[
          (el.css(‘opacity‘) == 0 || el.css(‘display‘) == ‘none‘) ? ‘fadeIn‘ : ‘fadeOut‘          ](speed, callback)    })  }})(Zepto)