如何通过jQuery或CSS实现提交按钮点击后的向下滑动效果

方案1：纯CSS实现 #

适合不想引入额外JS的场景，通过隐藏复选框触发状态变更，配合CSS过渡实现滑动效果：

• HTML代码：

<!-- 隐藏的状态控制复选框 -->
<input type="checkbox" id="submit-trigger" hidden>
<!-- 提交按钮用label关联复选框，点击即可触发状态变化 -->
<label for="submit-trigger" class="submit-btn">提交</label>

• CSS代码：

.submit-btn {
  display: inline-block;
  padding: 8px 20px;
  background: #2385bb;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* 过渡动画配置，所有属性变化0.3秒缓动 */
  transition: all 0.3s ease;
  position: relative;
  top: 0;
}
/* 复选框选中后，按钮向下滑动30px，可根据需求调整数值 */
#submit-trigger:checked + .submit-btn {
  top: 30px;
  /* 如果需要滑动后隐藏可以加opacity: 0; */
}

如果需要点击后提交表单，可以给label绑定click事件触发表单提交即可。

方案2：jQuery实现 #

兼容性更强，适合已经引入jQuery的项目，交互逻辑可扩展性更高：

• HTML代码：

<button class="submit-btn">提交</button>

• jQuery代码：

$('.submit-btn').on('click', function() {
  // 防止重复点击触发多次动画
  if ($(this).hasClass('sliding')) return;
  $(this).addClass('sliding');
  // 向下滑动30px，动画时长300毫秒
  $(this).animate({
    'margin-top': '+=30px'
    // 如需滑动后隐藏可以加 opacity: 0
  }, 300, function() {
    // 动画完成后的回调，可在这里执行表单提交等后续逻辑
    // $('form').submit();
  });
});

补充说明 #

• 滑动距离和动画时长可以根据视觉需求自行调整数值
• 如果需要按钮滑动后消失，在对应样式里添加opacity属性变化即可
• 实际业务场景建议添加滑动状态标识，避免用户重复点击产生异常交互

内容的提问来源于stack exchange，提问作者user386430