Question

Here is the effect I am after? Unfortunately, jQuery’s slideDown() 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?

Answer 1

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