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

这是我以后的效果？不幸的是，jQuery的slideDown()效果不一样。这是我之后的效果（代码和演示位于jsFiddle）。如何实现与jQuery的slideIn（MooTools）相同的效果？

我知道jQuery有一个animate()方法。但是究竟应该如何实现与MooTool的slideIn()方法相同的效果呢？

2011-07-01 Christian Fazzini

这里是进出（左/右）在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

来源

2011-07-01 04:09:07 Jasper

这只是移动div。它实际上并没有隐藏它.. –

它将div移动到另一个div的可视框架之外，如果你想要然后将容器div设置为不可见那就是另一行代码 – Jasper

我更新了代码来为父div创建动画以及。 – Jasper

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

来源

2011-07-01 04:18:22 patrickmcgraw

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

回答

相关问题