How to achieve the same effect as slideIn (MooTools) for Jquery?

Here is the effect I am after? Unfortunately, jQuery's sli开发者_Go百科deDown() effect isn't the same. This is the effect that I am after (Code and demo is located at jsFiddle).

I am aware that jQuery has an animate() method. But what exactly should be involved to achieve the same effect as MooTool's slideIn() method?

Here's a way to slide in and out (left/right) in JQuery, you should be able to quickly edit the code to match the effect you want:

----CSS----

#container_div {
    height: 200px;
    width: 400px;
    overflow: hidden;
    float: left;
}
#inner_div {
    height: 100%;
    width: 100%;
    position: relative;
    background-color: #ccc;
}

----JQuery----

$('#toggle_link').live('click', function() {
    if ($('#inner_div').css('left') == '0px') {
        $('#inner_div').stop().animate({left: (-1 * $('#inner_div').width())}, 1000).parent().stop().animate({width: '0px'}, 1000);
    } else {
        $('#inner_div').parent().stop().animate({width: '400px'}, 1000);
        $('#inner_div').stop().animate({left: '0px'}, 1000);
    }
});

----HTML----

<div>
  <a href="#" id="toggle_link">TOGGLE</a>
</div>
<div id="container_div">
    <div id="inner_div">test in here</div>
</div>
some stuff to the right

Check out this fiddle. It collapses the containing div so it does not take up space on the page while it is closed. This is pretty much exactly what MooTools does (not that I know MooTools but I did observe the CSS changes with Firebug).