在 jquery 中使用动画从右向左移动

Question

我正在尝试使用其 ID 为表单设置动画，以将 rihgt 向左移动。 我已经尝试过下面的代码，但这根本不会移动表单内容。 我在这里做什么错了？ 注意：我使用的是 Bootstrap v3.4.1

Html 代码：

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

Answer 1

由于 left 仅适用于定位元素，因此您可以为 translateX 设置动画。 使用 css 转换也比使用 jquery animation 更好：

 $(document).ready(() => { $("#formContent").addClass('animate'); })

 #formContent { transform: translateX(100vw); transition: 2s ease-in-out; } #formContent.animate { transform: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

如果您根本不想使用 jquery，您可以只使用关键帧 animation：

 #formContent { animation: 2s forwards alternate slidein; } @keyframes slidein { from { transform: translateX(100vw); } to { transform: none; } }

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