JQuery .animate()

Question

У меня есть скрипка здесь: jsfiddle.net/VnGRL/

В скрипке, на update() он изменяет CSS из .scroll искусственно прокручивать весь элемент. Это прекрасно работает:

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

Однако, как только я использую .animate() ничего не происходит:

$('.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' 
}); 

На самом деле, ваш код не может работать, потому что анимация является мощной базовой функцией. Это займет то, что вы дали как свойство, и попытайтесь склонить к этому значению, но вы указали какое-то странное значение, которое не является числом, а скорее строкой, содержащей некоторые цифры translate3d(x,y,z), 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); 

Скажите мне, если он работает правильно;), может быть, вам нужно будет отладить его немного ...