Question

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

我知道jQuery有一个animate()方法。但究竟应该采用什么来实现与MooTool slideIn()方法相同的效果？

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

结帐this fiddle。它会折叠包含div，因此在页面关闭时不会占用页面空间。这几乎就是MooTools所做的（不是我知道MooTools，但我确实观察过Firebug的CSS变化）。

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

2 个答案: