jQuery的.animate（）

Question

我這裏有一個小提琴：jsfiddle.net/VnGRL/

在小提琴上update()它改變了.scroll的CSS人爲滾動整個元素。但是，只要我使用.animate()什麼

$('.scroll').css({ 
    "transform": "translate3d(0, -" + newHeight + "px, 0)", 
    "-webkit-transform": "translate3d(0, -" + newHeight + "px, 0)" 
}); 

情況：這工作得很好

$('.scroll').animate({ 
    "transform": "translate3d(0, -" + newHeight + "px, 0)", 
    "-webkit-transform": "translate3d(0, -" + newHeight + "px, 0)" 
}, 800); 

有一個類似的問題here但他們並沒有包括px

Answer 1

我建議你這只是要使用CSS動畫，它應該始終可用，如果translate3d可用。

$('.scroll').css({ 
    '-webkit-transition-duration': '350ms', 
    'transition-duration', '350ms' 
}); 

其實，你的代碼無法工作，因爲animate是一個功能強大的基本功能。它會把你給出的屬性作爲屬性，並試圖傾向於這個值，但是你給出了一些不是數字的奇怪值，而是包含一些數字的字符串，jQuery不知道如何處理它。

如果你確實需要用JavaScript來做（例如最後一個回調），我建議你可以使用下面的方法。我把它變得非常簡單，如果它很關鍵，最好用jQuery FX和效果堆棧來改進它。

var animateTranslate3d(el, values, duration, complete, oldValues) { 
    var $el = $(el), 
     stepDuration = 10, 
     remainingSteps = Math.floor(duration/stepDuration), 
     newValues; 

    // Optimization, after the first step, oldValues never needs to be computed again 
    oldValues || (oldValues = ($el.css('transform') || $el.css('webkit-transform') || 'translate3d(0,0,0)').match(/translate3d\((\d).*,(\d).*,(\d).*\)/)).shift(); 
    newValues = [(values[0] - oldValues[0])/remainingSteps, (values[1] - oldValues[1])/remainingSteps, (values[2] - oldValues[2])/remainingSteps]; 

    $el.css('transform', 'translate3d(' + newValues[0] + ',' + newValues[1] + ',' + newValues[2] + ')'); 

    // Animation finished 
    if(duration <= 0) return (typeof complete === 'function' && complete()); 

    // Let's do the next step after a stepDuration delay 
    setTimeout(function(){animateTranslate3d(el, values, duration - stepDuration, complete, newValues)}, stepDuration) 
} 

animateTranslate3d('.scroll', [0, -newHeight, 0], 800); 

告訴我，如果它工作正常;），也許你會需要調試它一點點...