jQuery animate() e calc CSS()

Question

ho cercato di impostare i CSS calc() utilizzando jQuery animare, ad esempio:

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

e ho notato che calc() non funziona con jQuery animare ...

mi auguro che ci sia un modo per farlo, non voglio un modo simile per farlo, in alternativa o una soluzione, voglio impostare calc()

è questo impossibile? In ogni modo?

Se è possibile, per favore puoi mostrare come?

Answer 1

L'impostazione di calc() come desiderato non funzionerà. Il modo più semplice per farlo è quello di "calcolare" il suo valore in una variabile, qualcosa di simile:

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

quindi è possibile utilizzare l'animate() con la nuova variabile, qualcosa di simile:

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

Ho creato un CodePen con un esempio. Quando fai clic sul quadratino più chiaro (.animate-me), verrà animato al 100% dell'altezza del .container meno 30px. Spero che questo sia quello che stavi cercando ...

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

Se si desidera lavorare anche sulla finestra di ridimensionamento e si utilizza le variabili globali, allora si può solo aggiornare le variabili dall'interno di un ridimensionamento funzione, così:

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

Answer 2

Ero Googling per la risposta a questa domanda esatta. Ho visto questo link ed è stato come "SÌ!" Poi ho visto le risposte ed è stato come "no!" Ecco quello che ho fatto, in base a tuo esempio:

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

So che non ho fatto esattamente quello che hai chiesto, ma si anima al punto in cui si desidera animare per e quando hai finito E 'la larghezza si voleva essere impostato su Finché non stai ridimensionando mentre si sta animando, penso che sia una soluzione decente.