jquery - 使用 *= 将 CSS 属性值与 jQuery 相乘

Question

*= 是一个有效的 javascript 赋值运算符。为什么我不能用它来动画属性值？下面的代码将不起作用。我想做的就是将宽度和高度加倍。

$('div.box').animate({
    'width' : '*=2',
    'height' : '*=2',
}, 'slow');

Answer 1

这并不奏效，因为还没有人实施它。如果你想这样做（并使世界jQuery 更好一点），只需看看“Contribute to jQuery”.page 即可。

现在要解决您的问题：您必须自己进行计算 - 如下所示（未经测试，但您应该明白）：

对于单个元素：

var element = $('#animate');
element .animate({
  'width' : element.width()*2,
  'height' : element.height()*2,
}, 'slow');

对于多个元素：

$('.animate').each(function(){
  var element = $(this);
  element .animate({
    'width' : element.width()*2,
    'height' : element.height()*2,
  }, 'slow');
});

Answer 2

从根本上说，因为您试图将表达式文字传递给它，而不是表达式的结果。jQuery 本身没有处理来理解差异。为什么要这样做？jQuery 不应该有一个完整的 Javascript 解释器。那是严重的膨胀。

您将得到的最接近的是：

var divbox = $('div.box');
divbox.animate({ 
    width: (divbox.width() * 2) + 'px', 
    height: (divbox.height() * 2) + 'px'
});