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

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?

score 1 · Accepted Answer · edited Jul 01 '11 at 05:56

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

it moves the div outside the viewable frame of another div, if you want to then set the container div to be invisible thats just another line of code — Jasper, Jul 01 '11 at 04:24
Thanks, this works! Tried searching. Wonder if there is a plugin for this. — Christian Fazzini, Jul 01 '11 at 04:58

score 1 · Answer 2 · answered Jul 01 '11 at 04:18

1

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).

answered Jul 01 '11 at 04:18

patrickmcgraw

2,465
14
8

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

2 Answers2