Множество значений CSS-значений с помощью jQuery с использованием * =

Question

* = - действительный оператор присваивания javascript. Почему я не могу использовать его для анимации значений свойств? Код ниже не работает. Все, что я хочу сделать, это удвоить ширину и высоту.

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

Answer 1

Это не работает просто потому, что никто не реализовал еще. Если вы хотите это сделать (и сделать мир jQuery немного лучше), просто take a look at the "Contribut 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' 
});