como integro este css con jquery?

Hola gente....me surgio una duda/problema....estoy trabajando con css...y quiero agregar un efecto de jquery.

Tengo una imagen....y al poner el mouse encima...aparece un iframe con contenido...la idea es que el iframe aparezca de una forma elegante..deslizandose o algo asi...no de golpe...intente con SlideDown y SlideUp de jquery...pero no lo consigo


el HTML es el siguiente

Código HTML :

<a href="#" id="facebook"><img src="buttons/fb.png" width=100 height=100></img></a>
<div id="facebookstream">
<p><iframe src="facebook.html" height="300px" width="275" scrolling=no></iframe></img></p>
</div>


<a href="#" id="twitter"><img src="buttons/twitter.png" width=100 height=100></img></a>
<div id="twitterstream">
<p><iframe src="twitter.html" height="300px" width="275" scrolling=no></iframe></p>
</div>

el CSS es:

Código :

body { height: 100%; }
#facebook { top: 100; position: absolute; left: 550px; z-index:2 }
#facebookstream { height: 300px; width: 275px; border: 1px black; position: absolute; bottom: 150px; left: 550px; overflow-y: scroll:none; display:none; z-index:2 }
#facebook:hover + #facebookstream, #facebookstream:hover  { display: block; }

body { height: 100%; }
#twitter { top: 100; position: absolute; left: 650px; z-index:2}
#twitterstream { height: 300px; width: 275px; border: 1px black; position: absolute; bottom: 150px; left: 650px; overflow-y: scroll:none; display:none; z-index:2 }
#twitter:hover + #twitterstream, #twitterstream:hover  { display: block; }

Con slidedown puse algo asi

Código Javascript :

$('#twitter').click(function() {
  $('#twitterstream').slideDown('slow', function() {
    // Animation complete.
  });
});

pero no funciona....alguien que me de consejos...o me ayude.

Desde ya muchas gracias

mmm, si lo que quieres es que al pasar el mouse aparezca el iframe cambia tu evento click por hover o mouseenter, también borra el id="#twitterstream" del div y prueba colocandolo en el iframe, así:

Código HTML :

<a href="#" id="twitter"><img src="buttons/twitter.png" width=100 height=100></img></a>
<div>
<p><iframe  id="twitterstream" src="twitter.html" height="300px" width="275" scrolling=no></iframe></p>
</div>