有关cssHooks动画的实例

2024-01-16 13:58 小编
如果浏览器不支持任何形式的CSS属性写法,并且也不支持任何前缀写法,那么该样式是不会应用到元素上的。但是,如果浏览器支持某种特殊的写法,那么可以在 cssHooks 中添加对该特殊用法的支持。
  
  (function($) {
  
  // feature test for support of a CSS property
  
  // and a proprietary alternative
  
  // ...
  
  if ( $.support.someCSSProp && $.support.someCSSProp !== "someCSSProp" ) {
  
  // Set cssHooks for browsers that
  
  // support only a vendor-prefixed someCSSProp
  
  $.cssHooks.someCSSProp = {
  
  get: function( elem, computed, extra ) {
  
  return $.css( elem, $.support.someCSSProp );
  
  },
  
  set: function( elem, value) {
  
  elem.style[ $.support.someCSSProp ] = value;
  
  }
  
  };
  
  } else if ( supportsProprietaryAlternative ) {
  
  $.cssHooks.someCSSProp = {
  
  get: function( elem, computed, extra ) {
  
  // Handle crazy conversion from the proprietary alternative
  
  },
  
  set: function( elem, value ) {
  
  // Handle crazy conversion to the proprietary alternative
  
  }
  
  }
  
  }
  
  })(jQuery);
  
  Special units(特殊单位)
  
  默认情况下,传递给.css() 方法的值,jQuery添加一个“px”单位。可以通过jQuery.cssNumber对象中添加属性的方法,来防止这种行为的发生
  
  $.cssNumber["someCSSProp"] = true;
  
  Animating with cssHooks(cssHooks动画)
  
  通过向 jQuery.fx.step 对象中添加属性,cssHook 同样可以向 jQuery 的动画机制中添加钩子:
  
  $.fx.step["someCSSProp"] = function(fx){
  
  $.cssHooks["someCSSProp"].set( fx.elem, fx.now + fx.unit );
  
  };
  


在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码