jQuery1.9.1源码分析：动画处理与 Tween.propHooks

"这篇分析文章主要探讨了Jquery1.9.1版本中关于动画处理的一个外篇，重点讲解了`Tween.propHooks`这个对象在动画兼容性方面的作用。" 在Jquery1.9.1的动画实现中，`Tween.propHooks`是一个关键的组件，它用于在特殊情况下处理CSS属性的设置和获取。这个对象包含了一个默认的钩子`_default`以及针对特定CSS属性`scrollTop`和`scrollLeft`的钩子。这些钩子的存在主要是为了确保在各种浏览器环境下，特别是IE8离线状态下的兼容性，防止CSS特性值出现混乱。 `Tween.propHooks`的结构如下： ```javascript Tween.propHooks = { _default: { get: function() {}, set: function() {} }, scrollTop: { set: function() {} }, scrollLeft: { set: function() {} } }; ``` `scrollTop`和`scrollLeft`这两个属性的`set`方法用于在元素的节点上直接存储动画过程中的滚动位置值。这样做的目的是在某些情况下，当CSS特征值无法正确反映在样式中时，能有一个备用的存储机制。 例如，`set`方法中的一段代码： ```javascript set: function(tween) { if (tween.elem.nodeType && tween.elem.parentNode) { tween.elem[tween.prop] = tween.now; } } ``` 这段代码会在动画执行期间，将`tween.now`的值（动画当前的进度值）赋给元素的`scrollTop`或`scrollLeft`属性，确保即使在CSS无法正常更新的情况下，也能保持正确的滚动位置。 `Tween.propHooks._default`的`get`方法则负责尝试从元素节点上获取CSS属性值。如果直接从节点上获取不到，它会使用`jQuery.css()`方法来尝试获取。`get`方法的逻辑包括对返回结果的处理，例如将无法解析的复杂值保持原样，将空字符串、`null`、`undefined`和"auto"转换为0，以便于动画计算。 ```javascript get: function(tween) { var result; if (tween.elem[tween.prop] != null && (!tween.elem.style || tween.elem.style[tween.prop] == null)) { return tween.elem[tween.prop]; } // ... } ``` 通过这样的处理，`Tween.propHooks`保证了在动画过程中对CSS属性的准确控制和良好的浏览器兼容性。这使得jQuery能够流畅地处理动画效果，无论用户使用的浏览器环境如何。