*= 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');
Add a comment
|
2 Answers
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');
});
3 Comments
Sumurai8
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...
oezi
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 -= (api.jquery.com/animate/#animation-properties), so adding *= and /= would make it's functionality more consistent (and most people i know like consistency).
wetjosh
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 stackoverflow.com/questions/2900812/… to no avail.
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'
});
3 Comments
oezi
this won't work properly if the selector returns multiple elements with different dimensions.
nnnnnn
"And why should it?" - Well jQuery can already handle animations for
'+=' and '-=', so it's not that great a jump to wonder about '*=' too...Sumurai8
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.