向下滑动整个 div 而不是在 slideDown/slideUp 上显示答案

【问题标题】：Slide whole div down rather than reveal on slideDown/slideUp向下滑动整个 div 而不是在 slideDown/slideUp 上显示
【发布时间】：2013-06-25 22:31:25
【问题描述】：

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

这是正常的，因为我使用的是这里的元素：

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

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

还有其他方法使用 JQuery 的 css 吗？任何链接都会很棒！

这是我的 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);
        }
    });

标志 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/

【问题讨论】：

你能设置一个jsFiddle 你的问题吗？您的 HTML 没有提供足够的支持，所以我不确定这个问题，尽管它“看起来”好像它应该可以正常工作。
js 小提琴示例已添加 :)
大声笑，现在我更困惑了，你发布的 jsFiddle 完全符合它应该做的恰到好处。您的预期结果是什么，因为我正试图帮助解决这个问题，但我还没有看到“问题”？
你当时显然没有阅读他的问题。他想在不调整高度的情况下向下滑动 div。
很难解释对不起！正如您在链接中看到的那样，面板正在显示其中的文本。想象一下 div 的全尺寸和动画“向下”。我的网站示例有一个徽标图像，并且图像在显示图像时会向下滑动，而不是向下滑动 div。 aaronjwood.com滑动dix中的内容好像是固定在div里面，向下滚动而不是显示里面的内容？

标签： jquery css show slidedown

【解决方案1】：

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

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

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

【讨论】：

我已经使用您的示例对其进行了排序，在之前的评论中我使用了“动画”和“顶部”这两个词，所以我快到了！完善后将发布我的代码。谢谢
我已经在我的脚本中包含了 jQuery，它很棒，但是出于某种奇怪的原因，即使我将它更改为快速，它也需要很长时间才能向下滑动，并且它只在动画边缘顶部并向后滑动美好的？我已将我的代码包含在您的答案中。谢谢
啊，好像只在火狐上 - 将不得不研究！