使滑塊切換底部和頂部，而不是左或右用固定格

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) 
    }); 
});