Se você se envolveu pela primeira vez com jQuery há muitos anos, pode ter sido sua capacidade de fazer animação. Esse foi talvez um dos primeiros grandes atrativos do jQuery. Hoje em dia, o CSS também pode fazer animações com um suporte de navegador razoavelmente decente e tende a ter mais desempenho, por isso é menos relevante. No entanto, se você precisa de um suporte de navegador superdimensionado, jQuery ainda é uma opção.
Já cobrimos como alterar CSS no jQuery. Se parece com isso:
$("#element").css(( "background-color": "red", "left": "20px" ));Em vez de mudar instantaneamente esse elemento para esses valores, podemos animá-los. Parece quase exatamente o mesmo:
$("#element").animate(( "background-color": "red", "left": "20px" ));Aqui está a caneta que fizemos no vídeo:
Veja a Pen e111fbfa7506d19034d977b17e2160a3 de Chris Coyier (@chriscoyier) no CodePen
Se inspecionarmos esse elemento nas ferramentas de desenvolvimento do navegador, podemos ver como o jQuery está fazendo essa animação. Essencialmente, ele itera rapidamente o estilo embutido aplicado a esses elementos
Neste vídeo, examinamos alguns códigos jQuery que outra pessoa escreveu para ver como podemos dissecá-los.
Veja a caneta jQuery animate height: auto por Josh Parrett (@JTParrett) no CodePen
Durante essa jornada, fazemos uma pequena jornada lateral interessante sobre a animação em alturas de automóveis. Isso é algo que nem o CSS nem o JavaScript podem fazer muito bem. Eles preferem números rígidos. O Animate 10px a 200px faz sentido. Animar 10px para "o que você normalmente seria" não é tão fácil.
No código de Josh, encontramos uma função inteligente que essencialmente define a altura como automática, mede, define de volta ao que era e, em seguida, anima para esse valor recém-testado. Um truque muito legal! Para uma demonstração mais robusta que vai e volta e em JavaScript bruto, veja aqui.
Não percebi até que o vídeo acabou, mas jQuery na verdade nos ajuda com isso também. Arquivo que tem o motivo de usar o jQuery # 40985. Usar .slideUp/ .slideDown/ .slideToggle- funciona de alguma forma, mesmo se o elemento estiver oculto display: nonepara iniciar.
Veja a caneta jQuery animate height: auto por Chris Coyier (@chriscoyier) no CodePen
Para testar nosso trabalho no antigo IE, usamos o BrowserStack, que também está integrado ao CodePen.