jquery - 使用 jQuery.animate() 插入 CSS 规则

Question

我想自动将“渐变”CSS 样式应用于一系列 <div>要素；即设置 opaque对从透明到完全不透明的一系列元素进行规则。

jQuery.animate()似乎在插入我需要的 CSS 样式方面做得很好。但是，显然，animate()随着时间的推移过渡，而我只想计算一些单独的“帧”。

jQuery 代码中的某处必须隐藏为动画功能计算这些单独步骤的代码。我期待遇到类似 interpolate(objectWithOldCss, objectWithNewCss, step) 的事情但似乎找不到类似的东西。

有什么方法可以访问 jQuery 的插入 CSS 规则的代码并直接使用它吗？

---

编辑:感谢 James Montagne 的回答，我得到了以下 jQuery.interpolate()方法:

$.fn.interpolate = function(name, value, blend, easing) {
    var elem = this[0];
    if (jQuery.isArray(name)) {
        $.Tween(elem, {duration: 1}, name, value, easing || "linear").run(blend);
    } else {    
        easing = blend;
        blend = value;        
        $.each(name, function(n, v) {
            $.Tween(elem, {duration: 1}, n, v, easing || "linear").run(blend);
        });
    }
}

此处演示:http://jsfiddle.net/mwvdlee/yfcg5/

Answer 1

jQuery 使用 Tween( elem, options, prop, end, easing ) 来计算 tween 值。它无法预先计算所有这些，因为无法准确知道每个步骤何时运行。因此，它会在步骤执行时根据已过去的持续时间百分比获取下一个值。

注意:您必须包含持续时间(任何持续时间)，否则它将忽略缓动。

对于您的opacity 示例，您可以这样做:

var $divs = $("#holder div");
var steps = $divs.length;
var tween = new $.Tween( $divs[0], {duration: 1}, "opacity", 0, "swing");

for(var i = 0; i < steps; i++){
    var val = tween.run(1/(steps-1)*i).now;
    $divs.eq(i).css("opacity",val);
}

http://jsfiddle.net/878QQ/3/

这使用第一个匹配的 div 的不透明度作为起点，0 作为终点。