Tengo este html + css a continuación que representa un botón en el lado izquierdo de una página y un formulario de contacto simple directamente al lado.

Me gustaría animar el formulario para que cuando se haga clic en el botón, el formulario se deslice a la vista desde la izquierda y retroceda cuando se vuelva a hacer clic en el botón.

He tratado de seguir los tutoriales de jQuery pero nada parece funcionar.

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);
}

Código intentado:

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

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

});
0
Jason 16 feb. 2017 a las 16:51

3 respuestas

La mejor respuesta

Si desea animar, use 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');
    }
}

Espero que esto ayude. ¡Buena suerte!

0
Taufik Nur Rahmanda 16 feb. 2017 a las 14:03

Prueba este js puede que sea trabajo ..

    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
        }
    });

O

    <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>
0
Parth Jasani 16 feb. 2017 a las 14:14

Simplemente ponga su formulario en left: -100% y cree una clase con un left igual a 0 o mayor.

Cuando haces clic en el botón, adjuntas esa clase al formulario.

Mira esto: http://codepen.io/DaniloPolani/pen/NdmjMa

0
Theraloss 16 feb. 2017 a las 13:59