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>