O método animate()

Além dos efeitos predefinidos que já vimos, o jQuery permite que você crie suas próprias animações customizadas para gerar efeitos em elementos HTML. Para isso utilizamos o método animate(). Veja um exemplo:

$(document).ready(function () {
  $("button").click(function () {
    $(".box").animate({
      width: "300px",
      height: "300px",
      marginLeft: "250px",
      borderWidth: "20px",
      opacity: 0.5,
    }, "slow");
  });
});

O primeiro parâmetro que é necessário define as propriedade CSS do elemento HTML que será animado. O jQuery realizará uma transição gradual do estilo CSS anterior e do que você definiu no método animate().

Você também pode executar animações em fila, uma a uma, chamando o método animate() múltiplas vezes. Por exemplo:

$(document).ready(function () {
  $("button").click(function () {
    $(".box").animate({width: "300px"});
    $(".box").animate({height: "300px"});
    $(".box").animate({marginLeft: "250px"});
    $(".box").animate({borderWidth: "20px"});
    $(".box").animate({opacity: 0.5});
  });
});