Jquery 始终向上割台和滑动div

假设有一个始终可见的标题（也就是当页面向下滚动时）

单击此按钮时，divlogindiv将与jQuery一起显示：一个slideDown（）函数用于修饰目的

如何将页面内容div向下滑动到与logindiv相同的高度？ 当然，在向上滑动隐藏div之后，我还必须重置所有内容

看看我的工作。

---

此外，有关所需输出的示例，请参见。

执行更简单的操作-将两个div放入容器div中，然后滑动容器：

<div id="slide-me-instead">  <!-- Work with this -->
    <div id="header">
        <div id="logindiv">
            Someting to show for login purpose
        </div>
        My title etc.
    </div>
    <div id="pagecontent">
        page content and also a <button id="btn">Button</button>
    </div>
</div>

为登录而显示的内容
我的头衔等等。
页面内容和一个按钮

测量可见的logindiv的高度，并在单击btn时，为页面内容边距顶部加上其原始边距顶部以及logindiv.slidedown（）设置动画。

代码

$(function () {
    $('#btn').click(function(){
        var div =  $('#logindiv')
            var div2=$('#pagecontent')
            var div3=$('#header')
        if(div.is(':hidden'))
            {  div.slideDown();
        div2.css('margin-top',parseInt(div2.css('margin-top'))+ $('#header').height()+'px').hide().show('slow')} 
            else {
          div.slideUp();
        div2.css('margin-top',parseInt(div2.css('margin-top'))- $('#header').height()+'px').hide().show('slow')
    }

    });
});​

编辑

没有动画

$(function () {
    $('#btn').click(function(){
        var div =  $('#logindiv')
            var div2=$('#pagecontent')
            var div3=$('#header')
        if(div.is(':hidden'))
            {  div.slideDown();
        div2.css('margin-top',parseInt(div2.css('margin-top'))+ $('#header').height()+'px')} 
            else {
          div.slideUp();
        div2.css('margin-top',parseInt(div2.css('margin-top'))- $('#header').height()+'px')
    }

    });
});​

---

我找到了一个解决办法。在这里你可以找到你的名字

1） 我在页面内容之前添加了一个空div

<div id="header">
    <div id="logindiv">
        Someting to show for login purpose
    </div>
    My title etc.
</div>
<div id="forsliding"></div>
<div id="pagecontent">
    page content and also a <button id="btn">Button</button>
</div>

3） 我对Javascript代码做了一个小小的改动

$(function () {
   $('#btn').click(function(){
       var div =  $('#logindiv');
       if(div.is(':hidden'))
         div.add('#forsliding').slideDown();
       else
         div.add('#forsliding').slideUp();

    });
});

---

对不起，问题不明确。我希望现在好多了！Thanks@JeanValjean. 对不起，我抓到你了。但在这种情况下，我不会滑下div“logindiv”。我会滑下一切。也许我不明白。您能提供一个JSFIDLE吗？通过查看您的JSFIDLE，页面内容似乎消失了，然后随着幻灯片的下降而出现。我修改了你的css来突出这个问题：看，我刚刚添加了一个简单的方法，首先隐藏它并显示它。您可以删除.hide（），它将正常工作。。是通过应用更改获得的JSFIDLE。看看我的解决方案/技巧，似乎效果更好：我可以用这种方式使用向下/向上滑动！

<div id="header">
    <div id="logindiv">
        Someting to show for login purpose
    </div>
    My title etc.
</div>
<div id="forsliding"></div>
<div id="pagecontent">
    page content and also a <button id="btn">Button</button>
</div>

 #logindiv, #forsliding{
    width: 100%;
    height:40px;   
    display:none;
 }

$(function () {
   $('#btn').click(function(){
       var div =  $('#logindiv');
       if(div.is(':hidden'))
         div.add('#forsliding').slideDown();
       else
         div.add('#forsliding').slideUp();

    });
});