使用jQuery.animate（）插入CSS規則

我想自動將「漸變」CSS樣式應用於一系列<div>元素;即在從透明到完全不透明的一系列元素上設置opaque規則。使用jQuery.animate（）插入CSS規則

jQuery.animate()似乎在像我需要的插值CSS樣式方面做得很好。但是，顯然，animate()隨着時間的推移而轉變，而我只是想計算一些個別的「框架」。

jQuery代碼中的某處必須隱藏計算這些動畫功能的各個步驟的代碼。我期待遇到類似interpolate(objectWithOldCss, objectWithNewCss, step)的東西，但似乎無法找到類似的東西。

有什麼方法可以訪問插入CSS規則並直接使用它的jQuery代碼嗎？

編輯：多虧了詹姆斯·蒙塔涅的答案，我結束了以下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/

來源

2013-06-03 Martijn

https://github.com/jquery/jquery/blob/1.9-stable/src/effects.js特別是，看一下'Tween'的'run'方法。 –

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-03 21:20:12

優秀的答案！我不得不調整它以使它能夠與顏色一起工作（需要jQueryUI），然後我只是做了一個新的功能; 'jQuery.interpolate'，以便它可以同時處理具有多個屬性的對象：http://jsfiddle.net/mwvdlee/yfcg5/ – Martijn

使用jQuery.animate（）插入CSS規則

回答

相關問題