Question

我在表单上制作了一个向下滑动动画，我想让它在单击发送时由图像形成的框内向下滑动。

我想让它在点击发送时进入框内。

我使用jQuery，但我不擅长jQuery，所以需要帮助。

以下是我的代码： HTML代码：

<body>
  <div class="container">
    <div class="col-md-12 col-sm-12 app-form">
      <div class="col-md-offset-1 col-lg-10 col-md-10 form-wrap">
        <form class="check">
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Check me out
            </label>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
      <!--/.form-wrap-->

      <div class="col-md-12 col-sm-12 back-box-top"></div>
      <div class="col-md-12 col-sm-12 back-box-bottom"></div>
    </div>
  </div>
  <div>

CSS代码：

body{
    padding: 20px;
    background-color: #e49090;
}

.app-form{
    width: 67%;
    padding: 20px 45px;
    }


.form-wrap{
    background-color: #d8d8d8;
    padding: 20px;
}



.back-box-top {
    position: absolute;
    top: 276px;
    z-index: -10;
    height: 300px;
    background: url("../img/box-top.png") center top 0px no-repeat;
    background-size: 100% auto;
}

.back-box-bottom {
    top: 359px;
    position: absolute;
    height: 255px;
    background: url("../img/box-bottom.png") center top 0px no-repeat;
    background-size: 100% auto;
}

jQuery代码：

<script>
        $(document).ready(function(){
            $(".btn-default").click(function(){
        $("form").slidedown();
    });
</script>

Answer 1

首先，您需要学习jQuery的基础知识。

jQuery以两种格式提供幻灯片功能：

slideUp：用于通过movingUp隐藏元素。

slideDown：用于通过movingDown显示元素。

我认为您误解了使用slideDown()的原因。

代码中的问题：

不是slidedown() slideDown()。
您已对submit次点击执行了操作。虽然它会执行操作但刷新页面。您可以使用preventDefault()方法并通过JS提交表单，也可以使用输入type=button。在这两种方式中，您都必须通过JS。

更正了JQ代码

$(document).ready(function() {
  $(".btn-default").click(function() {
    $("form").slideUp();
  })});

Answer 2

好的，经过一些帮助，我终于找到了解决方案。以下是代码笔演示：http://codepen.io/vikrantnegi007/pen/KdVoqM

HTML：

<body>
  <div class="container">
    <div class="col-md-12 col-sm-12 app-form">
      <div class="col-lg-10 col-md-10 form-wrap">
        <form class="check">
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Check me out
            </label>
          </div>
          <a href="#" class="btn btn-default">Submit</a>
        </form>
      </div>
      <!--/.form-wrap-->    
      <div class="col-md-12 col-sm-12 back-box-top"></div>
      <div class="col-md-12 col-sm-12 back-box-bottom"></div>
    </div>
  </div>
  <div>   
</body>

CSS代码：

body{
    padding: 0px;
    background-color: #e49090;
    margin: 0;
}

.app-form{
    width: 67%;
    padding: 20px 45px;
    }

.form-wrap{
    position: absolute;
    background-color: #d8d8d8;
    padding: 20px;
    bottom: -323px;
    margin-left: 80px;
    width: 79%; 
    }

.back-box-top {
    position: absolute;
    top: 276px;
    z-index: -10;
    height: 300px;
    background: url("../img/box-top.png") center top 0px no-repeat;
    background-size: 100% auto;
}

.back-box-bottom {
    top: 359px;
    position: absolute;
    height: 255px;
    background: url("../img/box-bottom.png") center top 0px no-repeat;
    background-size: 100% auto;
}

jQuery代码：

$(document).ready(function(){
            $(".btn-default").click(function(){
                $(".form-wrap").slideToggle({
                    direction: "down"
                }, 300);    
            });
        });

使用jQuery向下滑动图像框内的表单

2 个答案: