jquery - 向下滑动整个 div，而不是在 SlideDown/slideUp 上显示

Question

我有一个功能，当标题向下滚动时到达某个 div 时， Logo 会向下滑动到导航栏上。这是可行的，但使用 jQuery 向下滑动似乎“显示”了 div，而不是立即显示整个 div 并向下滑动该 div。

它所做的事情是正常的，因为我正在使用这里的元素:

http://api.jquery.com/slideDown/

但是当我将鼠标悬停在导航上时，我会喜欢这个例子:http://aaronjwood.com/

还有其他使用CSS的JQuery的方法吗？任何链接都很棒!

这是我的 jQuery 来支持我的问题:

$(".logo .visible").hide(); 

    var topOfOthDiv = $("#home-2").offset().top;

    $(window).scroll(function(e) {
        e.preventDefault();
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $(".logo .visible").slideDown(300); //reached the desired point -- show div
        }else{
            $(".logo .visible").slideUp(300);
        }
    });

Logo CSS:

h1.logo {
    width:126px;
    height:58px;
    float:left;
    margin:0 0 0 40px;
    margin-left:40px;

}

.logo .visible{
    display:none;
    height:100%;
    background-color:#2e2e2e;
    background:url(../images//logo.jpg) no-repeat;
}

html

<div id="nav">
        <div class="nav_wrapper">
        <h1 class="logo"><div class="visible"></div></h1>
            <ul id="navigation">
            </ul>
        </div>
     </div>

在 js fiddle 中，当单击该元素时，面板会“显示”自身，而不是将 div 整体向下滑动(如示例链接进一步向上 ^^)。希望这是有道理的。

链接:http://jsfiddle.net/sVCvF/

Answer 1

您可以使用animate而不是slideDown将其向下滑动。 例如你可以使用这个:http://jsfiddle.net/sVCvF/

$(document).ready(function(){
  $("#flip").on('click', function(){
      $("#panel").animate({'margin-top': 0}, 1000);
  });
});

您确实需要对此代码进行一些调整