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

只需将表单放在left: -100%，然后创建一个left等于0或主要的类。

单击该按钮时，将该类附加到表单。

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

Answer 2

如果您想制作动画，请使用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 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>

jQuery滑出表单

3 个答案: