Javascript jQuery滑出表单

我在下面有一个html+css，它表示页面左侧的一个按钮，旁边是一个简单的联系人表单

我想动画的形式，使当按钮被点击的形式滑入视图从左边和退出时，再次点击按钮

我试着学习jQuery教程，但似乎没有任何效果

HTML:

已尝试的代码：

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

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

});

---

只需将表单放在

左侧：-100%

并创建一个

左侧

等于0或主修的类

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

---

请看以下内容：

如果您想制作动画，请使用

制作动画：

：

<a href="#call" onclick="toggle_form()">Request A Callback</a>

function toggle_form() {
    if ($('#callbackform').hasClass('open')) {
        $('#callbackform').animate({'left':'-245px'}).removeClass('open');
    } else {
        $('#callbackform').animate({'left':'0'}).addClass('open');
    }
}

HTML:

<a href="#call" onclick="toggle_form()">Request A Callback</a>

function toggle_form() {
    if ($('#callbackform').hasClass('open')) {
        $('#callbackform').animate({'left':'-245px'}).removeClass('open');
    } else {
        $('#callbackform').animate({'left':'0'}).addClass('open');
    }
}

---

希望这有帮助。祝你好运

试试这个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
        }
    });

或

#callbackform{transition:left 0.4s；-webkit transition:left 0.4s；}
#callbackform.active{left:45px}
jQuery（“#回调”）。单击（函数（）{
if（jQuery（'#callback'）.hasClass（“活动”））{
jQuery（“#回调”）.removeClass（“活动”）
}否则{
jQuery（“#回调”）.addClass（“活动”）
}
});

请向我们展示您尝试过的jQuery代码这是您的javascript？

    <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>