jQuery slide out form

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 может быть `s работа ..

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>