Multiply CSS property values ​​with jQuery using * =

Question

* = - valid javascript assignment operator. Why can't I use it to animate property values? The code below does not work. All I want to do is double the width and height.

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

Answer 1

This does not work simply because no one has implemented it yet. If you want to do this (and do worldjQuery a little better), just look at the "Contribute to jQuery" .page .

To solve your problem at the moment: you need to do the calculation yourself - something like the following (not tested, but you should get an idea):

For one item:

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

For multiple items:

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