jquery - 与 div 一起滑动的按钮

Question

我有一个表格和按钮。表单是隐藏的，但是当我单击按钮时，它会从左侧滑出。但是如何做到这一点，当我单击按钮时，按钮与幻灯片一起出现，当我再次单击时（当表单可见时），按钮与表单一起滑回位置。

$(document).ready(function () {
   $(".feedbackform").hide();
   $("#feedbackbutton").click(function () {
       $("#feedbackbutton").slideToggle({
           left: "300px"
       });
       $(".feedbackform").animate({
           width: "toggle"
       });
   });
});

#feedbackbutton {
   height: 30px;
   width: 100px;
   background: #ccc;
   position: absolute;
   left: 0;
   top: 30 % ;
}

.feedbackform {
   background: #09C;
     width: 300px;
     height: auto;
     position: absolute;
     top: 30%;
     left: 0;   
}

Answer 1

jsBin 演示

动画一个共同的父母。
将元素包装到 DIV ( #feedback)

<div id="feedback">
  <div class="feedbackform">
    
    FORM HERE
    
  </div>
  <div id="feedbackbutton">FEEDBACK</div>     
</div>

CSS：

#feedback{
  position:absolute;
  left:-300px; /* -width */
  width:300px;/*same as form*/
}

#feedbackbutton {
    height: 30px;
    width: 100px;
    background: #ccc;
    position: absolute;
    right: -100;/*minus width*/
    top: 30%;   
}

.feedbackform{
     background: #09C;
     width: 300px;
     height: auto;
     position: absolute;
     top: 30%;
     left: 0;   
}

jQuery：

  var c=0;
  $("#feedbackbutton").click(function(){
      $('#feedback').stop().animate({left: c++%2*-300 }, 800);
  });