JQuery - Как математически в анимации

Question

Мой код JavaScript:

var a = '10',
    b = '20';

$("#block").animate({
    marginLeft: a + b
}, 500 );

Почему это не работает правильно?

Answer 1

Вы добавляете строки, и для marginLeft устанавливается значение 1020 вместо 30.

Answer 2

Поскольку у вас есть кавычки вокруг чисел в объявлении переменной, вы делаете их строками.Это делает a+b = `1020

Теперь у вас также может быть проблема с тем, что вашему marginLeft необходимо иметь объявление единицы измерения (например, px).

Таким образом, вы должны иметь $("#block").animate({ 'marginLeft': (parseInt(a)+parseInt(b))+'px'}, 500 );

Answer 3

Посмотрите на это:

string + string = string
'10' + '20' = '1020'

number + number = number
10 + 20 = 30

string - (-string) = number
'10' - (-'20') = 30

number + string = string
10 + '20' = '1020'