<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="fade" style="width: 100px; height: 100px; background-color: blue; position: absolute; display: none"></div>
<div class="fade" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>
<button style="margin-top: 110px">Сменить!</button>
<script>
$(function() {
var speed = 700; // Скорость анимации изменения прозрачности в миллисекундах
$('button').click(function(){
$('.fade')
.stop() //не создаёт очередь анимаций при многократном клике до завершения текущей анимации
.fadeToggle(speed);//если display: none - показывает, нет - прячет.
})
})
</script>