jQuery slide out形式

Question

私は、ページの左側にあるボタンとそのすぐ隣にある簡単な連絡フォームを表すこのhtml + cssを以下に示します。

フォームをアニメーション化して、ボタンをクリックするとフォームが左からビューにスライドし、ボタンを再度クリックしたときに後退するようにしたいと思います。

私はjQueryのチュートリアルに従おうとしましたが、何も動作しないようです。

HTML：

<ul class="rotate" id="callback"> 
    <li> 
     <a href="#call">Request A Callback</a> 
    </li> 
</ul> 
<div id="callbackform"> 
    <?php echo do_shortcode('[contact-form-7 id="1472" title="Callback"]'); ?> 
</div> 

はCSS：

/* Callback Button and Form */ 

#callback { 
    position: fixed; 
    top: 300px; 
    left: -80px; 
    padding: 0; 
    list-style: none; 
    z-index: 9999; 
} 

#callbackform { 
    position: fixed; 
    background-color: #ffffff; 
    text-align: center; 
    top: 223px; 
    /* left: 45px; */ 
    left: -245px; 
    padding: 1.5px; 
    list-style: none; 
    z-index: 9998; 
} 

#callback li a { 
    display: block; 
    background-color: #B22222; 
    padding: 10px 10px 5px 10px; 
    font-size: 20px; 
    color: #5F9EA0; 
    font-weight: 600; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

/* Rotate Text on Button */ 

.rotate { 
    /* Safari */ 
    -webkit-transform: rotate(-90deg); 
    /* Firefox */ 
    -moz-transform: rotate(-90deg); 
    /* IE */ 
    -ms-transform: rotate(-90deg); 
    /* Opera */ 
    -o-transform: rotate(-90deg); 
    /* Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

コードを試してみました：

jQuery('#callback').click(function() { 
     jQuery('#callbackform').toggle('slide', { 
      direction: 'left' 
     }, 1000); 

    else{ 
     jQuery('#callbackform').toggle('slide', { 
      direction: 'left' 
     }, 1000); 
    } 

}); 

Answer 1

あなたがanimateを使用し、その後、アニメーション化したい場合：

HTML：

<a href="#call" onclick="toggle_form()">Request A Callback</a> 

JS：

function toggle_form() { 
    if ($('#callbackform').hasClass('open')) { 
     $('#callbackform').animate({'left':'-245px'}).removeClass('open'); 
    } else { 
     $('#callbackform').animate({'left':'0'}).addClass('open'); 
    } 
} 

このヘルプが必要です。がんばろう！

Answer 2

だけleft: -100%であなたのフォームを入れて、0に等しいか、または主要なleftでクラスを作成します。

ボタンをクリックすると、そのクラスをフォームに添付します。

これを見て：http://codepen.io/DaniloPolani/pen/NdmjMa

Answer 3

var width_ = 0 
    jQuery('#callbackform').css({"width":"0"}) 
    jQuery('#callback').click(function() { 
     if(width_){ 
      jQuery('#callbackform').animate({"width":0},600) 
      width_ = 1 
     } else { 
      jQuery('#callbackform').animate({"width":"100%"},600) 
      width_ = 0 
     } 
    }); 

または

<style> 
     #callbackform {transition:left 0.4s; -webkit-transition:left 0.4s;} 
     #callbackform.active {left:45px} 
    </style> 

    <script> 
    jQuery('#callback').click(function() { 
     if(jQuery('#callback').hasClass("active")){ 
      jQuery('#callback').removeClass("active") 
     } else { 
      jQuery('#callback').addClass("active") 
     } 
    }); 
    </script>