1

フォームとボタンがあります。フォームは非表示になっていますが、ボタンをクリックすると左からスライドします。しかし、その方法は、ボタンをクリックするとボタンがスライドと一緒に表示され、もう一度クリックすると（フォームが表示されている場合）、ボタンがスライドしてフォームと一緒に元の位置に戻るようにします。

$(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;   
}
4

1 に答える 1

2

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);
  });
于 2012-09-05T20:42:48.683 に答える