如何将一个DIV向下滑动到另一个后面

Question

这是我的HTML标记：

Text Text
Text Text

<div class="main_navi">
    NAVIGATION GOES HERE
</div>
<div class="sub_navi">
    SUBNAVIGATION GOES HERE
</div>

我想在sub_navi后隐藏main_navi，点击main_navi时，sub_navi DIV应该向下滑动。

我想知道如何正确定位sub_navi DIV以便滑动？负顶位，也许？

感谢。

Answer 1

这是您正在寻找的简单示例：

$(document).ready(function() {
    $('.main_navi').click(function() {
       $('.sub_navi').show(1200);
    });
  });​

Working Example 1

另一个例子是延迟更复杂一点，以使其更加流畅：

$(document).ready(function() {
    $('.main_navi').toggle(function() {
        setTimeout(function() {
            $('.sub_navi').show();
        }, 250);
        $('.sub_navi').animate({
            top: '+=15'
        }, 600);
    }, function() {
        setTimeout(function() {
            $('.sub_navi').hide();
        }, 200);
        $('.sub_navi').animate({
            top: '-=15'
        }, 500);
    });
});​

Working Example 2

Answer 2

选中此FIDDLE

$('.sub_navi').slideDown();

应该为你完成工作..