1

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

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

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

有没有办法访问插入 CSS 规则并直接使用它的 jQuery 代码？

编辑：感谢 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/

4

1 回答 1

2

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 作为终点。

于 2013-06-03T21:20:12.943 回答