Um pouco de mágica hoje. Já estamos mais do que acostumados a usar as funções $el.fadeIn() e $el.fadeOut(), nativas do jQuery, para fazer os efeitos de fadeIn e fadeOut. Que nada mais é, do que aquela transição suave de uma imagem opaca, para um “nada”.

Em css, isso é representado pela propriedade opacity.

Mas estou aqui hoje para lhes contar que não é mais necessário isso nos dias de hoje.

A especificação css3, trouxe uma nova propriedade chamada transition. E ela faz milagres, se formos pensar na complexidade e performance do código javascript equivalente que temos que escrever para chegar no mesmo resultado.

É tudo bem simples. Dado uma outra propridade, com valores numéricos, como width, height, opacity, left, top… o transition faz uma transição suave entre 2 valores. Essa propriedade css aceita um tempo em segundos do quanto “o efeito” irá demorar para acabar.

Exemplo

<img src="http://www.clipartsegifs.com.br/cliparts/variados/garfield/garfield_02.jpg" id="img-fade" />
<button id="btn-fade">FadeOut</button>

<style>
#img-fade { transition: 2s; }
.fade-out { opacity: 0; }
.fade-in { opacity: 1; }
</style>

<script>
var id = function(el) {
  return document.getElementById( el );
}
var $btn = id('btn-fade'),
  $img = id('img-fade');

$btn.onclick = function(){
  var $this = this;


  if( $img.className ==='fade-out' ){
    $img.className = 'fade-in';
    $this.innerHTML = 'FadeOut';
  } else {
    $img.className = 'fade-out';
    $this.innerHTML = 'FadeIn';
  }
}
</script>

É isso, já usou ? comente.