jQuery animate() i oblicz, CSS()

Question

Próbowałem ustawić CSS calc() użyciu jQuery animowania, na przykład:

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

i zauważyłem, że calc() nie pracuje z jQuery animowania ...

mam nadzieję, że istnieje sposób, aby to zrobić, nie chcę podobny sposób to zrobić, alternatywę lub obejścia chcę ustawić calc()

Czy to niemożliwe? W jakikolwiek sposób?

Jeśli to możliwe, proszę pokazać jak?

Answer 1

Ustawienie opcji calc(), tak jak chcesz, nie będzie działać. Najprostszym sposobem na to jest „oblicz” to wartość do zmiennej, coś takiego:

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

następnie można użyć animate() z nowej zmiennej, coś takiego:

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

Utworzono CodePen z przykładem. Po kliknięciu jaśniejszego kwadratu (.animate-me) zostanie on animowany do 100% wysokości .container minus 30 pikseli. Mam nadzieję, że to jest to, czego szukaliśmy ...

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

Jeśli chcesz go do pracy również na okno rozmiar i używasz zmiennych globalnych, wtedy można po prostu zaktualizować zmienne od wewnątrz zmiany rozmiaru funkcja, tak jak:

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

Answer 2

Szukałem odpowiedzi na to dokładne pytanie. Widziałem ten link i było jak "TAK!" Potem zobaczyłem odpowiedzi i brzmiało to jak "nie!" Oto co zrobiłem, oparte na przykład:

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

wiem, ja nie wiem dokładnie o co prosiłeś, ale ożywia się, gdzie chcesz animować do i po zakończeniu jego szerokość chciałeś ustawić na. Tak długo jak nie zmieniasz rozmiaru CZAS, który jest animowany, myślę, że to przyzwoite obejście.