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 demo

为共同父母制作动画 将您的元素包装成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);
  });

滑动按钮与div一起

1 个答案:

jsBin demo