为啥我无法使用 jquery animate 将 Div 滑动到屏幕上？
Posted
技术标签:
【中文标题】为啥我无法使用 jquery animate 将 Div 滑动到屏幕上？【英文标题】：Why am I unable to slide a Div onto the screen using jquery animate?为什么我无法使用 jquery animate 将 Div 滑动到屏幕上？ 【发布时间】：2021-12-11 19:45:58 【问题描述】：我想达到一个简单的效果，但是做错了什么。
基本上，我想使用 JQuery animate() 函数将表单从右侧滑到屏幕上，同时将不透明度从 0 调到 1。
我有一个 CLASS 为 "contact__formContainer" 的 DIV 元素，在其中我有一个非常简单的表单，其 CLASS 为 "contact__form"。
我对一些 CSS 进行了 SASS 编译，以便 contact__formContainer 将初始不透明度设置为 0，并将 margin-left 属性设置为 150vw。在我的 javascript 中，我初始化了一个 const 变量 "formContainer" 并使用 animate() 函数来尝试减少 left-margin 属性的值。
我搜索的所有示例似乎都将left-margin属性写为leftMargin，这让我有点困惑。这是我第一次使用 SASS，但我认为这不是问题。
以下是相关的 html、SASS 和 Javascript。感谢您花时间帮助我。如果结果是我忽略了一些简单的事情，我会花更多的时间来发布问题......只是被难住和沮丧。再次感谢！
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css">
<title>Contact James Dyer</title>
<!--Scripting-->
<link rel="stylesheet" href="tingle.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.lettering.js"></script>
<script type="text/javascript" src="./js/jquery.textillate.js"></script>
<script type="text/javascript" src="./js/contact_TextEffects.js"></script>
<script src="tingle.min.js"></script>
</head>
<body>
<header>
<div class="menu-btn">
<span class="menu-btn__burger"></span>
</div>
<nav class="nav">
<ul class="menu-nav">
<li class="menu-nav__item">
<a href="index.html" class="menu-nav__link">
Home
</a>
</li>
<li class="menu-nav__item">
<a href="about.html" class="menu-nav__link">
About Me
</a>
</li>
<li class="menu-nav__item">
<a href="projects.html" class="menu-nav__link">
My Projects
</a>
</li>
<li class="menu-nav__item active">
<a href="contact.html" class="menu-nav__link">
Contact Me
</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="contact">
<h2 id="title">Hi!...</h2>
<div class="contact__formContainer">
<form class="contact__form" action="/formHandler.php" method="post">
<label for="fname" class="fname">First Name:</label>
<input type="text" name="fname" class="fname_input">
<label for="lname" class="lname">Last Name:</label>
<input type="text" name="lname" class="lname_input">
<label for="email" class="email">Email:</label>
<input type="email" name="email" class="email_input">
<label for="msg" class="message_input">Message:</label>
<textarea id="msg" name="user_message" class="message"></textarea>
<button type="submit" class="button">SEND</button>
</form>
</div>
<div class="contact__list">
<div class="contact__email">
<i class="fas fa-envelope"></i> Email
<div class="text-secondary">xxxxxxxxxxxxxxxxx</div>
</div>
<div class="contact__phone">
<i class="fas fa-mobile-alt"></i> Phone
<div class="text-secondary">xxxxxxxxxxxxxxxxxxx</div>
</div>
<div class="contact__address">
<i class="fas fa-marker-alt"></i> Address
<div class="text-secondary">xxxxxxxxxxxxxxxxxxxx</div>
</div>
</div>
<div class="social-icons">
<a href="#!">
<i class="fab fa-twitter fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-facebook fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-instagram fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-github fa-2x"></i>
</a>
</div>
<footer>© Copyright 2019</footer>
</section>
</main>
<script src="https://kit.fontawesome.com/6d2ea823d0.js"></script>
<script src="js/main.js"></script>
</body>
</html>
SASS：
.contact
height: 100%;
padding-top: 5vh;
overflow: hidden;
display: flex;
flex-direction: column;
background:url("../img/aboutPage.png") center top;
background-size: cover;
h2
font-size: 3rem;
margin-bottom: 2rem;
text-align:center;
margin-top:8vh;
&__formContainer
width:auto;
height:auto;
margin-left: 150vw;
display:flex;
flex-direction:column;
opacity: 0;
&__form
display: grid;
grid-template-columns: repeat(4, 10vw);
grid-template-rows: repeat(2, 3vw) 9em 3vh;
grid-template-areas: "fname fname_input lname lname_input"
"email email_input . ."
"message_input message message message"
". button . .";
align-items:start;
row-gap: 1em;
column-gap: 2em;
margin-left: 15vw;
width: 50vw;
/* Form outline */
padding: 1em;
border-radius: 1em;
margin-bottom:2vh;
/*Rest of Style attributes*/
ul
list-style: none;
padding: 0;
margin: 0;
border: 3px solid red;
width:auto;
height:auto;
li
margin-top: 1em;
label
/* Uniform size & alignment */
display: inline-block;
width: 90px;
text-align: right;
margin-bottom: 1vh;
.fname
grid-area: fname;
width: 10vw !important;
height: 1.5em !important;
.fname_input
grid-area: fname_input;
width: 15vw !important;
height: 1.5em !important;
.lname
grid-area: lname;
width: 10vw !important;
height: 1em !important;
.lname_input
grid-area: lname_input;
width: 15vw !important;
height: 1.5em !important;
.email
grid-area: email;
width: 10vw !important;
height: 1.5em !important;
.email_input
grid-area: email_input;
width: 15vw !important;
height: 1.5em !important;
.message
grid-area: message;
width: 40vw !important;
height: 9em !important;
.message_input
grid-area: message_input;
width: 10vw !important;
height: 1.5em !important;
.button
grid-area: button;
width: 10vw !important;
height: 1.5em !important;
background:pink;
color: orange;
&:hover
background:#ebb476;
color: red;
input,
textarea
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 1em sans-serif;
/* Uniform text field size */
width: 25vw;
box-sizing: border-box;
/* Match form field borders */
border: 1px solid #999;
grid-area: message;
input:focus,
textarea:focus
/* Additional highlight for focused elements */
border: 2px solid pink;
padding: 0.5em;
textarea
/* Align multiline text fields with their labels */
vertical-align: top;
/* Provide space to type some text */
height: 5em;
grid-area: message;
&__list
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
font-size: 1.5rem;
margin-left:2em;
&__phone
margin-left: 2em;
.social-icons
position: initial;
JAVASCRIPT：
$(document).ready(function()
const contactMe = $("#title");
const formContainer = $(".contact__formContainer");
console.log("The contact page script is recognized");
contactMe.textillate(
in: effect: 'fadeInUp' ,
loop: true,
out: effect: 'fadeOutUpBig' ,
delayScale: 1,
delay: 150,
);
formContainer.animate(
opacity: 1,
marginLeft: "-=50vw",
, 5000, function()
//Animation complete
formContainer.css("margin-left","5vw");
formContainer.css("opacity","1");
);
);
【问题讨论】：
【参考方案1】：我想我应该花更多时间阅读参考资料。我将位置属性更改为“相对”，它现在可以工作了。
【讨论】：
位置属性是什么？以上是关于为啥我无法使用 jquery animate 将 Div 滑动到屏幕上？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 jquery.animate 在 textarea 上使闪烁的光标消失？
jQuery 循环 - 是啥停止了幻灯片，为啥 animate() 不起作用？