我想制作一个简单的电子邮件输入+按钮表单，一旦提交，就应该在同一页面上用另一个div替换。我在表单上应用了jquery的.hide("slow"(，在第二个div上应用了.show("slove"(，虽然它确实显示/隐藏了元素，但它没有应用平滑过渡。
我做错了什么？？
现场示例：https://codepen.io/mcancode/pen/vYKXmbr
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#subscribed > div > p {
display: none;
}
</style>
</head>
<body>
<main>
<section id="newsletter">
<div id="unsubscribed">
<h3>Subscribe to our newsletter to get 10% off your next purchase</h3>
<form id="newsletter-form">
<div>
<input type="email" placeholder="Enter your email">
<button type="submit">
Submit
</button>
</div>
</form>
</div>
<div id="subscribed">
<div>
<p>Thank you for subscribing! You should receive an email with the discount code in the next 5 minutes.</p>
</div>
</div>
</section>
<!-----------------END OF NEWSLETTER---------->
</main>
<!--JS files...-->
<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>
$(() => {
//check when newsletter form submitted
$("#newsletter-form").submit((event)=> {
event.preventDefault();
$("#unsubscribed").hide("slow");
$("#subscribed>div>p").show("slow");
})
});
</script>
</body>
</html>
只有几件事。
-
以内部元素为目标进行隐藏-不能以包装元素("时事通讯"(为目标隐藏它，然后显示它的一个子元素。你会想要瞄准——"；取消订阅"；。
-
给你想淡出视图的另一个区域一个隐藏它的起始样式("已订阅"(style=&；显示：无"；
-
看起来你引用的jquery版本不包括这个动画——我在你的原始引用之后引用了jquery的更新版本(https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
</head>
<body>
<main>
<section id="newsletter">
<div id="unsubscribed">
<h3>Subscribe to our newsletter to get 10% off your next purchase</h3>
<form id="newsletter-form">
<div>
<input value="sample@email.com" type="email" placeholder="Enter your email">
<button type="submit">
Submit
</button>
</div>
</form>
</div>
<div id="subscribed" style="display:none;">
<div>
<p>Thank you for subscribing! You should receive an email with the discount code in the next 5 minutes.</p>
</div>
</div>
</section>
<!-----------------END OF NEWSLETTER---------->
</main>
<!--JS files...-->
<!-- jQuery and JS bundle w/ Popper.js -->
<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://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(() => {
//check when newsletter form submitted
$("#newsletter-form").submit((event)=> {
event.preventDefault();
$("#unsubscribed").hide("slow");
$("#subscribed").show("slow");
})
});
</script>
</body>
</html>