使用jQuery animate实现表单从右到左移动失效问题排查

你用left属性做动画没效果，核心原因是默认状态下元素的position为static，left、top这类定位属性对static元素完全不起作用，所以动画根本触发不了。

1. 先给#formContent设置非static的定位，推荐用relative（不会破坏Bootstrap的流式布局）：

#formContent {
  position: relative;
}

2. 把jQuery代码放到DOM加载完成的回调里（避免元素还没渲染就执行代码，找不到目标元素）：

$(document).ready(function() {
  $("#formContent").css({ "left": "2000px" }).animate({ "left": "0px" }, "slow");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#formContent {
  position: relative;
}
</style>
<div class="row">
  <div class="col">
    <h1><span id="firstLineTxt"></span></h1>
    <h1><span id="secondLineTxt"></span></h1>

    <div id="formContent">
      <div class="form-group">
        <input class="form-control input-lg" id="fullname" type="text" placeholder="Full Name">
      </div>
      <div class="form-group">
        <input class="form-control input-lg" id="email" type="text" placeholder="Email">
      </div>
      <button type="button" class="btn btn-danger btn-lg">Let's Start</button>
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
  $("#formContent").css({ "left": "2000px" }).animate({ "left": "0px" }, "slow");
});
</script>

• 别随便用absolute定位，不然容易脱离Bootstrap的栅格布局，破坏响应式效果，relative是更稳妥的选择。
• 如果之前没加$(document).ready()，代码可能在页面元素还没加载完就执行，找不到#formContent，这也会导致动画没反应。

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