使用javascript上下移动DIV

你好， 我正在建立一个网站，我想有一个div向下移动，并在另一个div区域上点击备份。 它认为页面的页眉包含从左到右的帐户图像：徽标、水平菜单、购物车和帐户符号

当我单击帐户符号时，我希望标题向下滑动60像素，我希望另一个带有帐户相关链接的div显示在刚刚向下滑动的标题上方。 我取得了一些成就，但我真的不满意：

<script>
    jQuery(document).ready(function($){
        $(".account").click(function);
            $("#accountbar").slideToggle( "slow");
            $("#topheader").toggleClass("topheader topheaderdown");
            $("#contentarea").toggleClass("content contentdown");
        });
    });
</script>

1那么这是做什么的呢？它加载新的账户栏高度60px，然后向下滑动这个账户栏

2它显示topheader向下另一个60px css样式规则top:60px

3当账户栏和topheader都显示时，它还显示其余内容主内容比正常值低120像素。默认情况下，该值为60px，因此仅适用于topheader

我希望在单击帐户图像时，事情能够平稳地向下和向上滑动。我之所以能做到这一点，是因为我能够顺利地向下移动顶部标题部分：

<script>
    jQuery(document).ready(function($){
        $("#account").on('click',function(){
            $("#accountinner").toggle(function() {
                $("#topheaderid").animate({ top: '-=60px' }, 500);
            },function() {
                $("#topheaderid").animate({ top: '+=60px' }, 500);
            })
        });
    });
</script>

问题1：以上只是在我每次点击顶部标题时将其向下移动越来越远，而不是按照规定再次返回60像素

问题2：上面的问题也会以某种方式将我的帐户图像滑出屏幕

我还想在这里实现其他规则，这样一次单击，topheader就会以60px的速度平稳地向下移动，顶部会出现一个新的div accountbar中的帐户导航，内容类内容会再向下移动60px。如前所述，使用slidetoggle和toggleclass可以工作，但我更愿意使用动画功能来完成这项工作，因为它看起来很棒。 我已经从第一个脚本开始实现了这些规则，但显然它并没有顺利发生，topheader只是一直在下降

我希望这是足够的信息，有人可以帮助： 当这项工作，我想扩大这与搜索按钮，以及出现在下面的topheader点击

---

谢谢。

您可以触发如下动画：

jQuery(document).ready(function($){
  $("#account").on('click',function(){
  if($(this).hasClass('open')) {
         $("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
        $("#accountbar").animate({ height: '0' }, { duration: 500, queue: false });
        $('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
        $(this).removeClass('open');   
  } else {
        $("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false });
        $("#accountbar").animate({ height: '60px' }, { duration: 500, queue: false });
        $('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
        $(this).addClass('open');  
  }


  });
});

从隐藏div中删除display none并将高度更改为0

---

演示：

非常感谢您，madalin！这正是我想要的！！明天我将实现它，并尝试添加下面的搜索栏。Cheers设置值点击：谢谢你的回复，但不，我正是在看madalin下面解决的问题。。。