Podría ser así (pincha en la V).
Código HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<style>
div#contenedor { width:600px; background:blue; margin: 100 auto; }
div.cancion { float:left; width:280px; background:yellow; height:100px; margin: 10 10; }
div#clear { width:100%; clear:both; cursor:pointer; background:red; color:white; text-align:center; font-weight:900; }
</style>
<script>
jQuery.fn.revertir = function() {
return this.pushStack(this.get().reverse());
};
$(function(){
$("div#clear").click(function(){
var contador=0;
$("div.cancion").revertir().each(function(){
$(this).delay(contador).fadeOut('slow');
contador+=300;
});
});
});
</script>
<body>
<div id="contenedor">
<div class="cancion"></div>
<div class="cancion"></div>
<div class="cancion"></div>
<div class="cancion"></div>
<div class="cancion"></div>
<div class="cancion"></div>
<div id="clear">V</div>
</div>
</body>
</html> Si tus div.cancion no están situados de forma flotante, podrias eliminar la declaración de la funcion revertir (el codigo del principio), y el .revertir() justo antes del .each().
Yo lo he puesto así porque si empiezo a eliminar el primer div, el segundo ocuparia su lugar y se queda mas feo (segun mi gusto).