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.