jQuery滑出窗体

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%并创建一个类与left等于0或大。

当您单击按钮时，您将该类附加到窗体。

看看这个：http://codepen.io/DaniloPolani/pen/NdmjMa

Answer 3

尝试这个js可能是它`工作..

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>