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作为结束。

使用jQuery.animate（）来插入CSS规则

1 个答案: