jquery - Jquery如何实现与slideIn（MooTools）相同的效果？

Question

这是我想要的效果吗？不幸的是，jQuery 的slideDown()效果并不相同。这是我追求的效果（代码和演示位于jsFiddle）。

我知道 jQuery 有一个animate()方法。slideIn()但是，要达到与 MooTool 的方法相同的效果，究竟应该涉及什么？

Answer 1

这是一种在JQuery中滑入和滑出（左/右）的方法，您应该能够快速编辑代码以匹配您想要的效果：

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

Answer 2

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