使用固定div使滑动切换底部和顶部向左或向右

Question

HTML：

我想在slideToggle逻辑中使用这个div。但它有两大问题：

1-我不知道为什么但是当我打开网站时我的固定div已经打开了。然而，它必须接近。

2-当我点击标题时，它会关闭。好。但是，如果我尝试打开或关闭我的div两次，它就不起作用了。

我该怎么做？

DEMO

   $('#form .header').click(function() {
     $('#form').stop().animate({
       bottom: "0px"
     }, 500);
   }, function() {
     var height = $('#form').height() - 60;
     $('#form').stop().animate({
       bottom: -height
     }, 500);
   });

     #form {
       position: fixed;
       bottom: 0;
       right: 80px;
       width: 400px;
       height: 720px;
       z-index: 99999;
       background: red;
     }
     .header {
       background: gray;
       width: 399px;
       height: 74px;
       cursor: pointer;
     }

<div id="form" style="bottom: 0;
            right: 80px;
            width: 400px;
            height: 720px;">
  <div class="header"></div>
  <?php if( function_exists( 'ninja_forms_display_form' ) ){ ninja_forms_display_form( 17 ); } ?>
</div>

Answer 1

尝试使用top。在jsfiddle http://jsfiddle.net/uWnjx/279/调整为-70px jsfiddle，以便.header稍微可见，可以点击

$(function () {
    var form = $("#form");
    form.find(".header").on("click", function (e) {
        $("#form").animate({
            top: form.css("top") === "-70px" ? "80%" : "-70px"
        }, 500)
    });
});