Javascript jquery显示/隐藏慢输入不起作用
我想做一个简单的电子邮件输入+按钮表单，一旦提交，应该用另一个div替换，同时保持在同一页上。我在表单上应用了jquery的.hide（“slow”），在第二个div上应用了.show（“slow”），虽然它确实显示/隐藏了元素，但它没有应用平滑转换 我做错了什么 实例： 守则：Javascript jquery显示/隐藏慢输入不起作用,javascript,html,jquery,hide,show,Javascript,Html,Jquery,Hide,Show,我想做一个简单的电子邮件输入+按钮表单，一旦提交，应该用另一个div替换，同时保持在同一页上。我在表单上应用了jquery的.hide（“slow”），在第二个div上应用了.show（“slow”），虽然它确实显示/隐藏了元素，但它没有应用平滑转换 我做错了什么 实例： 守则： <!DOCTYPE html> <html lang="en"> <head> <style> #subscribed > div
<!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>
#订阅>div>p{
显示：无；
}
订阅我们的时事通讯，下次购买可享受10%的折扣
提交
感谢您的订阅！在接下来的5分钟内，您将收到一封带有折扣代码的电子邮件
$(() => {
//检查何时提交新闻稿表单
$（“#时事通讯表格”）。提交（（事件）=>{
event.preventDefault（）；
$（“#取消订阅”）.hide（“慢”）；
美元（“#订阅>div>p”）。显示（“慢”）；
})
});
订阅我们的时事通讯，下次购买可享受10%的折扣
提交
感谢您的订阅！在接下来的5分钟内，您将收到一封带有折扣代码的电子邮件
$(() => {
//检查何时提交新闻稿表单
$（“#时事通讯表格”）。提交（（事件）=>{
event.preventDefault（）；
$（“#取消订阅”）.hide（“慢”）；
美元（“#认购”）。显示（“慢”）；
})
});