4

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

$('div.box').animate({
    'width' : '*=2',
    'height' : '*=2',
}, 'slow');
wetjosh
  • 6,288
  • 4
  • 23
  • 32

2 Answers2

6

This doesn't work simply because nobody has implemented it yet. If you want to do so (and make the worldjQuery a bit better), just take a look at the "Contribut to jQuery".page.

To solve your problem for now: you have to do the calculation on your own - something like the following (not tested, but you should get the idea):

For a single element:

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

For multiple elements:

$('.animate').each(function(){
  var element = $(this);
  element .animate({
    'width' : element.width()*2,
    'height' : element.height()*2,
  }, 'slow');
});
oezi
  • 51,017
  • 10
  • 98
  • 115
  • It's a good answer, except for the political statement that the world would be better if you needlessly bloat up a library with unneeded functionality and that the answer completely lacks any capitals... – Sumurai8 Oct 06 '13 at 06:36
  • You're right about the capitals (i thew some in), but i have to disagree with "needlessly bloat up" - jQuery does implement the syntax for `+=` and `-=` (http://api.jquery.com/animate/#animation-properties), so adding `*=` and `/=` would make it's functionality more consistent (and most people i know like consistency). – oezi Oct 06 '13 at 06:56
  • Ok, I think *= should work too but the code you posted @oezi works just right. Thank you. Follow up question: how can I also multiply the border radius by 2. I've already tried 'border-radius' : element.css('border-radius')*2. That is a no go. I've also tried following this post http://stackoverflow.com/questions/2900812/how-do-i-get-the-border-radius-from-an-element-using-jquery to no avail. – wetjosh Oct 09 '13 at 01:24
1

Fundamentally, because you're trying to pass it an expression literal, rather than the results of an expression. jQuery has no handling within itself to understand the difference. And why should it? jQuery shouldn't have to have an entire Javascript interpreter within it. That's serious bloat.

The closest you're going to get is:

var divbox = $('div.box');
divbox.animate({ 
    width: (divbox.width() * 2) + 'px', 
    height: (divbox.height() * 2) + 'px'
});
Elf Sternberg
  • 16,129
  • 6
  • 60
  • 68
  • 2
    this won't work properly if the selector returns multiple elements with different dimensions. – oezi Oct 06 '13 at 06:27
  • 3
    _"And why should it?"_ - Well jQuery can already handle animations for `'+='` and `'-='`, so it's not that great a jump to wonder about `'*='` too... – nnnnnn Oct 06 '13 at 06:28
  • jQuery parses `"+=50px"` and `"-=50px"` somehow to add or substract 50px to/from the current value and I guess OP either thought jQuery eval'ed that (which I hope jQuery doesn't) or OP didn't realize it was a string, and every case will need to be defined in jQuery. – Sumurai8 Oct 06 '13 at 06:32