JQuery animate() и CSS calc()

Я попытался установить CSS calc() с помощью jQuery animate, например:

$element.animate({
    height: 'calc(100% - 30px)'
}, 500);

и я заметил, что calc() не работает с анимацией jQuery...

Я надеюсь, что есть способ сделать это, я не хочу, чтобы это было похоже, альтернатива или обходной путь, Я хочу установить calc()

Это невозможно? В любом случае?

Если возможно, пожалуйста, вы можете показать, как?

Ответ 1

Настройка calc(), как вы хотите, не будет работать. Самый простой способ сделать это - "вычислить" это значение в переменной, что-то вроде этого:

var newHeight = $('.container').height() - 30;

то вы можете использовать animate() с новой переменной, примерно так:

$('.animate-me').animate({
  height: newHeight
}, 500);

Я создал CodePen с примером. Когда вы нажмете более светлый квадрат (.animate-me), он будет анимироваться до 100% от высоты .container минус 30 пикселей. Надеюсь, это то, что вы искали...

http://codepen.io/anon/pen/JYqPxm

Если вы хотите, чтобы он работал и при изменении размера окна, и вы используете глобальные переменные, вы можете просто обновить переменные изнутри функции изменения размера, например:

$(window).on("resize",function() {
  // update all variables that you need
});

Ответ 2

Я был Googling для ответа на этот точный вопрос. Я видел эту ссылку и был как "ДА!" Затем я увидел ответы и был как "нет!". Вот что я сделал, основываясь на вашем примере:

var nextHeight = $element.parent().width()-30;
$element.animate({
    height:nextHeight
}, {duration:500, complete:function(){ $element.width("calc(100% - 30px)"); } });

Я знаю, что не делал ТОЧНО то, что вы просили, но он оживляет то, где вы хотите, чтобы он оживился и когда вы закончили его, в ширину, на которую вы хотели бы установить. До тех пор, пока вы не изменяете размер, если он оживляет, я думаю, что это достойное решение.