2012-11-06 21 views
1

我需要簡單的js簡單的動畫。我認爲jquery太多了。我需要增加或按按鈕減小塊的高度,但這項工作只能在Opera(簡單的動畫變化高度沒有jquery

Example

function global_animate(element, property_to_map, duration, callback) { 
    duration = duration || 1000; 
    var delta = function (a) { return a; }; 
    var start = new Date().getTime(); 
    var property_from_map = {}; 
    var property_units_map = {}; 

    for (var property in property_to_map) { 
     property_from_map[property] = window.getComputedStyle(element, null)[property] || element.currentStyle[property]; 
     property_units_map[property] = parseUnits(property_from_map[property]); 
     property_from_map[property] = parseInt(property_from_map[property]); 
     property_to_map[property] = parseInt(property_to_map[property]); 
    } 

    function parseUnits(a) { 
     try { 
     return a.match(/^\d+(\w{2}|%);?$/i)[1]; 
     } catch (e) { 
     return ""; 
     }     
    } 

    setTimeout(function() { 
    var now = (new Date().getTime()) - start; 
    var progress = now/duration; 

    for (var property in property_to_map) { 
     var result = (property_to_map[property] - property_from_map[property]) * delta(progress) + property_from_map[property]; 
     element.style[property] = result.toFixed(2) + property_units_map[property]; 
    } 

    if (progress < 1) 
     setTimeout(arguments.callee, 10); 
    else 
     if (typeof callback == 'function') 
     callback(); 
    }, 10); 
} 

回答

0

你需要的正則表達式從

alert("23.2px".match(/^\d+(\w{2}|%);?$/i));​ // alert null 

改變這樣的事情

alert("23.2px".match(/^\d+\.*\d*(\w{2}|%);?$/i));​ // alert ["23.2px", "px"] 
+0

謝謝,它的工作。 – ReklatsMasters

0

我認爲問題出在你的正則表達式:。a.match(/^\d+(\w{2}|%);?$/i)[1];第二次它運行簡化版,它捕捉到單位正常

如果我硬編碼的單位「像素」,它爲我工作(鉻):?http://jsfiddle.net/9DCA5/5/

也許你可以從那裏調試

0

的getComputedStyle方法()在IE瀏覽器不支持,它採用了 「currentStyle」 屬性。