MAXIMIZAR & MINIMIZAR CON JQUERY (fancybox) ...

[sp3ncer]

Saludos a todos
Tengo un problema algo complicado y bueno espero que por ser esta mi primera consulta en el foro me puedan ayudar .

Paso a explicarles :
Necesito ponerle música a una web, y bueno con ello aparecen dos problemas...
el contenido (la música) y la presentación.
El primer dilema ya esta solucionado, he recurrido a un widget de Groveshark, el cual ofrece la posibilidad de crear widget para colocarlos en nuestra web o blog.
Sin embargo es en el segundo dilema, donde hasta ahora no encuentro solución, LA PRESENTACIÓN de este widget.
Por razones estéticas y funcionales, estoy tratando de ocultar la apariencia de este widget musical, mas no su función, es decir quiero que cuando el usuario presione un botón, este widget (por defecto oculto) pueda aparecer sobre la web (primer plano) y que al presionar otro botón (o el mismo) pueda ocultarse y pasar a un segundo plano, pudiéndose escuchar la música en todo momento, mientras se puede navegar por la web (primer plano). ESTO SERIA LO MAS CERCANO A UN EFECTO MAXIMIZAR MINIMIZAR.

He probado con el famoso FANCYBOX teniendo resultado a medias, puedo ocultar el widget al cargar la web, puedo hacerlo aparecer al presionar un botón, llego a escuchar la música,
PERO SIN EMBARGO NO LLEGO A OCULTAR EL WIDGET SIN QUE LA MUSICA DESAPAREZCA...
OCULTO EL WIDGET Y LA MUSICA DEJA DE ESCUCHARSE....

Esto es lo que tengo hasta el momento ... impactoperu.com/LS_IMPACTO/music.html

Espero que alguien me pueda dar una solución...
gracias de antemano

SALUDOS A TODOS

[mayid]

PERO SIN EMBARGO NO LLEGO A OCULTAR EL WIDGET SIN QUE LA MUSICA DESAPAREZCA...

Porque al ocultar el fancybox seguramente se esté eliminando su contenido :)

Mi solución sería sacarlo de la pagina así:

.oculto{position: absolute; top: -800px}

$("div#musica").click(function(){

$("div#widget").addClass("oculto");
}

Así como te lo pongo no tiene vuelta atras. Proba hacer un toggle para mostrar / ocultar.

[sp3ncer]

GRACIAS AMIGO
SI RESULTO :

Código:

<script>

$("#animar").toggle(function(){
  $(".music").animate({"top": "197px"}, "slow");
  },function(){
  $(".music").animate({"top": "-420px"}, "slow");
});

</script>