jQuery animate() và CSS calc()

Question

Tôi cố gắng để thiết lập CSS calc() sử dụng jQuery động, ví dụ:

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

và tôi nhận thấy rằng calc() không hoạt động với jQuery động ...

tôi hy vọng rằng có một cách để làm điều đó, tôi không muốn có một cách tương tự để làm điều đó, một sự thay thế hoặc một workaround, tôi muốn thiết calc()

đây có phải là bất khả thi? Bằng cách nào?

Nếu có thể, vui lòng cho bạn biết cách thực hiện?

Answer 1

Đặt calc() như bạn muốn sẽ không hoạt động. Cách đơn giản nhất để làm điều đó là để "tính toán" giá trị của nó vào một biến, một cái gì đó như thế này:

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

sau đó bạn có thể sử dụng animate() với các biến mới, một cái gì đó như thế này:

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

Tôi đã tạo một CodePen với một ví dụ. Khi bạn nhấp vào hình vuông sáng hơn (.animate-me), nó sẽ được làm động tới 100% chiều cao .container trừ đi 30px. Tôi hy vọng điều này là những gì bạn đang tìm kiếm ...

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

Nếu bạn muốn nó làm việc cũng trên cửa sổ thay đổi kích thước và bạn đang sử dụng các biến toàn cục, sau đó bạn chỉ có thể cập nhật các biến từ bên trong một thay đổi kích thước , như vậy:

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

Answer 2

Tôi đã tìm kiếm câu trả lời cho câu hỏi chính xác này. Tôi thấy liên kết này và giống như "CÓ!" Sau đó tôi thấy câu trả lời và giống như "không!" Đây là những gì tôi đã làm, dựa trên ví dụ của bạn:

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

Tôi biết tôi đã không làm chính xác những gì bạn hỏi, nhưng nó sinh động đến nơi bạn muốn nó để animate đến và khi bạn hoàn thành đó là chiều rộng bạn muốn có nó được đặt thành. Miễn là bạn không thay đổi kích thước khi nó hoạt hình, tôi nghĩ rằng đó là một cách giải quyết tốt.