如何解决jQuery显示/隐藏慢速输入不起作用
我想制作一个简单的电子邮件输入+按钮表单，一旦提交，应留在同一页面上，并用另一个div替换。我在窗体上应用了jquery的.hide（“ slow”），在第二个div上应用了.show（“ slow”），尽管它确实显示/隐藏了元素，但并没有应用平滑过渡。
我在做什么错？？
实时示例：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 =“ display：none”
-
您所引用的jquery版本似乎不包含此动画-我在原始引用（https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js）之后引用了jquery的更新版本
<!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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。