Javascript 在提交表单之前，如何让动画运行？
我写的剧本不起作用，我不明白为什么。 我希望动画一直运行，直到我提交表单为止，动画假定将整个表单向下移动 动画在我加载页面时发生，但我希望它一直运行，直到我单击submit 动画在我加载页面时发生，但我希望它一直运行，直到我单击submitJavascript 在提交表单之前，如何让动画运行？,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我写的剧本不起作用，我不明白为什么。 我希望动画一直运行，直到我提交表单为止，动画假定将整个表单向下移动 动画在我加载页面时发生，但我希望它一直运行，直到我单击submit 动画在我加载页面时发生，但我希望它一直运行，直到我单击submit $（函数（）{ $（“#提交按钮”）。在（'单击'，函数（）上{ $（“#div1”）.addclass（“动画”）； }) }); 。动画{ 位置：相对位置； 动画：mymove 10s； } @关键帧mymove{ 从{ 顶部：0px； } 到{ 顶部
$（函数（）{
$（“#提交按钮”）。在（'单击'，函数（）上{
$（“#div1”）.addclass（“动画”）；
})
});
。动画{
位置：相对位置；
动画：mymove 10s；
}
@关键帧mymove{
从{
顶部：0px；
}
到{
顶部：300px；
}
}
.表格2{
可见性：隐藏；
}
补偿
评论
名称
姓
电子邮件
评级
选择。。。
一颗星
双星
三星
四星
消息
提交
单击提交按钮后，必须使用removeClass
jquery函数删除动画类。
因此，您的代码如下所示：
<HTML>
<head>
<title>Comements</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/css/uikit.min.css" />
</head>
<body>
<h3 class="text-center mt-3 font-weight-bolder">Comments</h3>
<div class="container pt-5" >
<div id="div1" class="d-flex justify-content-center container-sm p-4 animation">
<form class="form1" >
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputName">Name</label>
<input type="text" class="form-control" name="nombre" id="nombre" required>
</div>
<div class="form-group col-md-6">
<label for="inputLastName1">Last name</label>
<input type="text" class="form-control" name="apellido_paterno" id="apellido_paterno" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" name="email" placeholder="" id="email" required>
</div>
<div class="form-group col-md-6">
<label for="rating">Rating</label>
<select class="form-control" name="rating_stars" required>
<option selected disabled value="">Choose...</option>
<option>1 estrella</option>
<option>2 estrellas</option>
<option>3 estrellas</option>
<option>4 estrellas</option>
</select>
</div>
</div>
<div class="form-group">
<label for="comment">Message</label>
<textarea class="form-control" rows="5" name="mensaje" id="mensaje" required></textarea>
</div>
<div class="text-center p-3 ">
<button type="submit" class="btn btn-primary btn-md font-weight-normal" id="submitButton">Submit</button>
<div class="p-4"></div>
</div>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit-icons.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<style>
.animation { position: relative; animation: mymove 10s; }
@keyframes mymove {
from { top: 0px; }
to { top: 300px; }
}
.form2 { visibility: hidden; }
</style>
<script>
$(function() {
$("#submitButton").on('click', function(){
$("#div1").removeClass('animation');
})
});
</script>
</body>
</HTML>
补偿
评论
名称
姓
电子邮件
评级
选择。。。
1雌蕊
2雌蕊
3雌蕊
4雌蕊
消息
提交
.animation{位置：相对；动画：mymove 10s；}
@关键帧mymove{
从{top:0px；}
到{top:300px；}
}
.form2{可见性：隐藏；}
$（函数（）{
$（“#提交按钮”）。在（'单击'，函数（）上{
$（“#div1”）.removeClass（'animation'）；
})
});
调用函数时出现拼写错误
$("form").on('submit', function(){
$("#div1").addClass('animation');
})
Javascript区分大小写。这么简单
将addclass（“动画”）替换为addclass（“动画”）
同时，所有用户不能单击“提交”按钮有时用户单击“输入”按钮提交表单
因此，请使用以下语句调用该函数
$("form").on('submit', function(){
$("#div1").addClass('animation');
})
在解决这两个问题后，您的以下代码将
$（函数（）{
$（“表单”）。在（'submit'，function（）上{
$（“#div1”）.addClass（“动画”）；
})
});
。动画{
位置：相对位置；
动画：mymove 10s；
}
@关键帧mymove{
从{
顶部：0px；
}
到{
顶部：300px；
}
}
.表格2{
可见性：隐藏；
}
补偿
评论
名称
姓
电子邮件
评级
选择。。。
一颗星
双星
三星
四星
消息
提交
实际上，您需要两个事件处理程序
单击#submitButton
的事件处理程序，单击该按钮可将动画
类添加到#div1
submit
事件处理程序，它在表单提交时删除动画
类$（“#提交按钮”）。在（'click'，function（）上{
$（“#div1”）.addClass（“动画”）；
})
$（'form.form1'）。在（'submit'，function（）上{
$（“#div1”）.removeClass（'animation'）；
});
。动画{
位置：相对位置；
动画：mymove 10s；
}
@关键帧mymove{
从{
顶部：0px；
}
到{
顶部：300px；
}
}
.表格2{
可见性：隐藏；
}
补偿
评论
名称
姓
电子邮件
评级
选择。。。
一颗星
双星
三星
四星
消息
提交
使用动画：[animation name][animation length]infinite如何？
？嗯，但我不希望在单击提交按钮时动画是无限的。单击提交按钮时，您可以删除创建动画的类。我做了更改，但当我单击“提交”按钮时，它仍不会运行动画：（您好，但我需要的是在单击按钮时运行动画，而不是将其删除。您说过我希望它一直运行，直到我单击submit
，因此，如果您要在提交后运行动画，您所要做的就是从div1中删除动画类，并在js代码中使用'addClass'函数。