jquery - JqueryのslideIn(MooTools)と同じ効果を得るには?

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

----Jクエリ----

$('#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