jQuery .animate()

Question

这里我有一把小提琴：jsfiddle.net/VnGRL/

在小提琴中，在update()上，它改变了.scroll的CSS，以人为地滚动整个元素。这可以很好地工作：

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

实际上，你的代码不能工作，因为animate是一个像basic一样强大的函数。它会将你给出的东西作为属性，并试图接近这个值，但是你给出了一些奇怪的值，它不是一个数字，而是一个包含一些数字的字符串，translate3d(x,y,z)，jQuery不知道如何处理它。

如果你真的需要在JavaScript中做这件事(例如拥有最终的回调)，我建议你可以使用以下方法。我让它变得非常简单，如果它是关键的，那么最好用jQuery FX和effect堆栈来改进它。

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);

告诉我它是否工作正常;)，也许你需要调试一下……