Как добиться того же эффекта, что и slideIn (MooTools) для Jquery?

Question

Вот какой я эффект? К сожалению, slideDown() эффект jQuery не то же самое. Это тот эффект, который мне нужен (код и демонстрационная версия находятся по адресу jsFiddle ).

Мне известно, что в jQuery есть метод animate(). Но что именно должно быть задействовано для достижения того же эффекта, что и метод MooTool slideIn()?

Answer 1

Проверьте эту скрипку .Он сворачивает содержащий div, поэтому он не занимает место на странице, пока она закрыта.Это почти то же самое, что делает MooTools (не то чтобы я знал MooTools, но я наблюдал изменения CSS с Firebug).

Answer 2

В 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