Anime o Inanimado

A animate()função do jQuery é ótima para realizar animações personalizadas, mas infelizmente não funciona com todas as propriedades CSS.

Quando você deseja animar uma propriedade que não é tratada por padrão, há um truque simples que você pode usar.

Por exemplo, digamos que eu tenha um elemento 3D que desejo girar animando, mas acho que a transformpropriedade não responde quando passada para animate().

Usando uma propriedade CSS arbitrária que aceita um valor inteiro , podemos acessar o estado atual desse valor na step()função da animação para atualizar a rotação.

Você pode usar qualquer propriedade CSS baseada em inteiro , mas, neste caso, empregaremos a orphanspropriedade pouco usada para passar como o valor do passo. Vamos animar essa propriedade de 0 a 1, o que nos dará fácil acesso a um multiplicador de porcentagem em cada etapa da animação.

var animate_to_degrees = 45;
$('#block').css({ orphans: 0 })
           .animate({ orphans: 1 }, {
             step: function(n, fx) {
               var cur_degrees = animate_to_degrees * n;
               var transform = 'rotateY('+cur_deg+'deg)';
               $(this).css({
                '-webkit-transform': transform,
                   '-moz-transform': transform,
                    '-ms-transform': transform,
                     '-o-transform': transform,
                        'transform': transform
               });
             }
             ,easing: 'easeInOutCubic'
             ,duration: 3000
           });

Veja a rotação em ação

A função é chamada continuamente conforme a animação é processada, com o valor de ser um número entre 0 e 1 que representa a porcentagem da animação que foi concluída. Se você quiser animar ao contrário, pode ir de 1 a 0 ou apenas multiplicar por -1 .step()ncur_deg

Vamos tentar um mais complicado, animando uma mudança de cor de fundo.

var $block = $('#block');
var original_color = $block.css('background');

var animate_from = [];
var animate_to = [0, 0, 0]; // paint it black

// populate the animate_from array with the rgb() value
var color_value;
var color_value_regex = /([0-9]+)[,)]/g;
while ((color_value = color_value_regex.exec(original_color)) !== null) {
  animate_from.push(+color_value[1]);
}

$block.css({ orphans: 0 })
      .animate({ orphans: 1 }, {
        step: function(n, fx) {
          // skip the first step (don't multiply by 0)
          if (n === 0) { return; }

          var color_step = [];
          for (var i = 0; i < 3; i++) {
            var step_value = n * (animate_to[i]
                                - animate_from[i]);

            // if the value is negative (decreasing)
            // use it to offset the original value
            if (step_value < 0) {
              step_value += animate_from[i];
            }

            // rgb() doesn't like floats
            color_step.push(parseInt(step_value, 10));
          }
          $(this).css({
            background: 'rgb(' +color_step.join()+ ')'
          });
        }
        ,easing: 'easeInOutCirc'
        ,duration: 5000
      });

Veja a mudança de cor em ação

Ok, esse último ficou um pouco cabeludo. Ainda assim, você pode ver que, ao explorar esse truque, você ganha uma maneira fácil de animar praticamente qualquer propriedade (ou combinação de propriedades) de acordo com um valor de porcentagem simples governado por qualquer uma das funções de atenuação padrão do jQuery.

Existem muitas possibilidades aqui, então eu adoraria ouvir o que você pensa.

Tchau!